:checked 伪类选择器不适用于 CSS

【问题标题】：:checked pseudo class selector is not working on CSS:checked 伪类选择器不适用于 CSS
【发布时间】：2017-07-17 04:24:39
【问题描述】：

我正在尝试使用 :checked 伪类仅使用 css 显示/隐藏图像。控制台没有显示错误，但我无法在单击复选框时看到图像。

HTML 代码：

<!DOCTYPE>
<html>
    <head>
    <link rel="stylesheet" href="java.css">
    </head>
    <body>
        <div id="div1"></div>
        <input type="checkbox" id="chk1">
        <img src="IMAG0182.jpg" style="display :none"></img>

    </body>
</html>

CSS 代码：

input[type=checkbox]:checked + img {
display : block;
}

【问题讨论】：

如果你问的是纯 css 问题，为什么你的问题会被标记为 javascript 和 jQuery？

标签： html css pseudo-element

【解决方案1】：

内联样式总是会覆盖样式表，这是CSS Specificity的规则之一。

在样式表中设置初始状态

input[type=checkbox] + img {
  display: none;
}


input[type=checkbox]:checked + img {
  display: block;
}

<input type="checkbox" id="chk1">
<img src="IMAG0182.jpg" />

【讨论】：

现在仍然无法正常工作，无论复选框是否选中，图像总是显示
嗯，答案中的演示似乎工作得很好，所以我现在真的不知道问题是什么？也许您还有其他一些干扰的样式？
还是不行，只有这部分单独工作 input[type=checkbox]:checked{}