[英]CSS pseudo-class :checked apply to parents
可以将伪类应用于子元素。
input[type=checkbox] + label {
color: #ccc;
font-style: italic;
}
input[type=checkbox]:checked + label {
color: #f00;
font-style: normal;
}
<input type="checkbox" id="ossm" name="ossm">
<label for="ossm">CSS is Awesome</label>
如何将伪类应用于父亲或父母? 例如DIV元素? 我怎么写我的CSS代码? 我的输入已在页面加载时“检查”,所以我只需要添加样式。
<div>
<label for="ossm">
<input type="checkbox" id="ossm" name="ossm" checked>
</label>
</div>
当前的CSS Selectors Level 4工作草案提出了关系伪类:has()
,因此将来可能会这样:
div:has(> label > input[type=checkbox]:checked) {
/* ... */
}
但是,截至撰写本文时,没有浏览器支持此伪类选择器。
目前,单独使用CSS“选择祖先元素”是不可能的。 目前,您必须继续使用兄弟选择器或使用一些JavaScript来侦听复选框上的change
事件并选择其祖先元素。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.