:checked 伪类选择器不适用于 CSS [英] :checked pseudo class selector is not working on CSS
本文介绍了:checked 伪类选择器不适用于 CSS的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使用 :checked 伪类仅使用 css 来显示/隐藏图像.控制台没有显示错误，但我无法在单击复选框时看到图像.
I am trying to show/hide a image using :checked pseudo class using only css. The console shows no error but I am not able to see the image on clicking the checkbox.
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 特异性.
Inline styles will always override a stylesheet,it's one of the rules of CSS Specificity.
在样式表中设置初始状态
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" />这篇关于:checked 伪类选择器不适用于 CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
