CSS伪类：选中适用于父母

Question

可以将伪类应用于子元素。

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代码？ 我的输入已经过检查＆＃34;在页面加载，所以我只需要添加样式。

<div>
    <label for="ossm">
        <input type="checkbox" id="ossm" name="ossm" checked>
    </label>
</div>

Answer 1

当前的CSS Selectors Level 4工作草案提出了relational pseudo-class :has()，因此将来可能会这样做：

div:has(> label > input[type=checkbox]:checked) {
   /* ... */
}

但是，截至撰写本文时，没有浏览器支持此伪类选择器。

目前，单独使用CSS“选择祖先元素”是不可能的。目前，您必须继续使用兄弟选择器或使用一些JavaScript来侦听复选框上的change事件并选择其祖先元素。