CSS伪类：选中“应用于父类”

可以将伪类应用于子元素

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>

输入[type=checkbox]+标签{
颜色：#ccc；
字体：斜体；
} 
输入[类型=复选框]：选中+标签{
颜色：#f00；
字体风格：普通；
}
CSS太棒了

如何将该伪类应用于partent或parents？ 例如DIV元素？如何编写CSS代码？ 我的输入已经在页面加载时被“检查”，所以我只需要添加样式

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

---

当前的CSS选择器4级工作草案提出了以下建议，因此这在将来应该是可能的：

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

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

---

目前，仅使用CSS无法“选择祖先元素”。暂时，您必须继续使用同级选择器或使用一些JavaScript来侦听复选框上的

change

事件，并选择其祖先元素。

css中目前没有父选择器。有关父选择器的详细信息，请转到此链接第一个代码示例不使用子选择器，而是使用同级选择器。这一部分似乎与所问的问题无关。@OP如果您对jQuery或vanilla JavaScript解决方案没有意见，请发表评论，我会在回答中添加一个。我没有添加这样一个解决方案，因为在没有

javascript

标记的问题上它似乎离题了。请注意，虽然选择器4引入了

：has（）

（以前是主题指示器），@BoltClock我对此一无所知，感谢您提供的信息！引用工作草案：“符合选择器级别4的CSS实现必须使用快速配置文件进行CSS选择。”——这意味着

：has（）

将不能在样式表中使用？这将大大降低这种选择器的实用性。现在还不清楚实现是否可以自由地尝试实现

：has（）

，或者这样做是否不符合要求。希望有人能想出一种更好的方法，允许在CSS中使用慢速选择器，而不会造成太多开销。