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

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

Answer 1

当前的 CSS Selectors Level 4 工作草案提出了关系伪类:has()，所以这在未来应该是可能的：

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

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

目前，单独使用 CSS 无法“选择祖先元素”。目前，您将不得不继续使用同级选择器或使用一些 JavaScript 来侦听change复选框上的事件并选择其祖先元素。