<分区>
标签 html css parent-child
<分区>
我有 block 级父元素，这些元素至少有一个可能满足也可能不满足特定条件的内联 block 子元素。我想设置父类的样式以突出显示特定子类型的存在(下面是“特殊”类):
<parent>
<child class="normal">Text</child>
</parent>
<parent>
<child class="special">Text</child>
</parent>
通常，这不会成为问题，因为我会通过 JavaScript 在父类上放置一个等效类。但是，在这种情况下，我正在为 Firefox 附加组件 Stylish 编写样式表，因此我没有 JavaScript DOM 访问权限，只能使用预先存在的内容。我在网上找到的假设解决方案包括:
parent < child.special {/*style*/}
parent! > child.special {/*style*/}
parent:has(child.special) {/*style*/}
但是，我能找到的关于这个问题的最新信息是 2013 年或更早的，而且上述所有方法似乎都不再是 CSS 规范的一部分(或者至少在 Firefox v32.0 中不起作用) .x).
如果有人能就此提供指导(即使只是告诉我这是不可能的)，我将不胜感激。请记住，它只需要在 Firefox 中工作，所以即使它是一个“-moz”解决方案，我也会接受它。我知道提升祖先与级联样式表的目的相反，并且在大多数情况下形式不佳，但我目前的情况要求这样做。
最佳答案
您可以使用 has() 来完成, 但它目前在 Firefox 的标志后面:
parent:has(child.normal) { /*style*/ }
parent:has(child.special) { /*style*/ }
standard set 中没有这样的选择器
您现在唯一可以使用的是:
parent:empty { /*style*/ }
关于html - 使用 CSS 根据子条件设置父级样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26394781/