[英]:checked pseudo class selector is not working on CSS
I am trying to show/hide a image using :checked pseudo class using only css. 我试图仅使用css使用:checked伪类显示/隐藏图像。 The console shows no error but I am not able to see the image on clicking the checkbox.
控制台未显示任何错误,但单击复选框后看不到图像。
HTML Code : 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 Code : CSS代码:
input[type=checkbox]:checked + img {
display : block;
}
Inline styles will always override a stylesheet,it's one of the rules of CSS Specificity . 内联样式将始终覆盖样式表,这是CSS特异性的规则之一。
Set the initial state in the stylesheet 在样式表中设置初始状态
input[type=checkbox] + img { display: none; } input[type=checkbox]:checked + img { display: block; }
<input type="checkbox" id="chk1"> <img src="IMAG0182.jpg" />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.