使用 CSS 根据子条件设置父级样式 [英] style parent based on child conditions with CSS

问题描述

我有块父元素，它们至少有一个内联块子元素，这些子元素可能满足也可能不满足特定条件.我想设置父级的样式以突出显示特定子类型的存在(下面是特殊"类):

I have block parent elements that have at least one inline-block child element which may or may not meet a specific condition. I'd like to style the parent to highlight the presence of a particular child type (below, "special" class):

<parent>
    <child class="normal">Text</child>
</parent>
<parent>
    <child class="special">Text</child>
</parent>

通常，这不会成为问题，因为我只会通过 JavaScript 在父级上删除一个等效的类.但是，在这种情况下，我正在为 Firefox 附加组件 Stylish 编写样式表，因此我没有 JavaScript DOM 访问权限，只能使用预先存在的内容.我在网上找到的假设解决方案包括:

Normally, this wouldn't be an issue since I would just drop an equivalent class on the parent via JavaScript. However, in this case I'm writing a style sheet for the Firefox add-on Stylish, so I have no JavaScript DOM access and can only work with the preexisting content. Supposed solutions I've found online include:

parent < child.special {/*style*/}
parent! > child.special {/*style*/}
parent:has(child.special) {/*style*/}

然而，我能找到的关于这个问题的最新信息是 2013 年或更早的，而且似乎上述所有方法都不再是 CSS 规范的一部分(或者至少在 Firefox v32.0 中不起作用.x).

However, the latest info I could find on this issue is from 2013 or earlier, and it seems that all of the above methods are no longer part of the CSS specs (or at least don't work in Firefox v32.0.x).

如果有人可以提供这方面的指导(即使只是告诉我它无法完成)，我将不胜感激.请记住，它只需要在 Firefox 中工作，所以即使它是一个-moz"解决方案，我也会接受它.我知道上升祖先与级联样式表的目的背道而驰，并且在大多数情况下是糟糕的形式，但我目前的情况要求这样做.

If anyone can provide guidance on this (even if just to tell me it cannot be done), I would greatly appreciate it. Keep in mind, it only has to work in Firefox, so even if it's a "-moz" solution, I'll take it. I know that ascending ancestry is contrary to the purpose of cascading style sheets and in most cases would be poor form, but my current circumstances mandate doing so.

推荐答案

标准集.

你现在唯一可以使用的是:

The only thing that you can use now is this:

parent:empty { /*style*/ }

这篇关于使用 CSS 根据子条件设置父级样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！