如果它有带有 CSS 的子元素，则将样式应用于父元素 [重复]

Posted 2023-03-06

【中文标题】如果它有带有 CSS 的子元素，则将样式应用于父元素 [重复]

【英文标题】：Apply style to parent if it has child with CSS [duplicate]

【发布时间】：2014-02-10 17:13:38

【问题描述】：

如果parent 有child 元素，我正在尝试将styles 应用于它。

到目前为止，我已将样式应用于 child 元素（如果存在）。但如果parent 有child，我想style parent，只使用CSS。

下面是html

<ul class="main">
    <li>aaaa</li>
    <li>aaaa</li>
    <li>aaaa</li>
    <li>aaaa</li>
    <li>aaaa
        <ul class="sub">
            <li>bbbb</li>
            <li>bbbb
                <ul>
                    <li>cccc</li>
                    <li>cccc</li>
                    <li>cccc</li>
                </ul>
            </li>
            <li>bbbb</li>
            <li>bbbb</li>
            <li>bbbb</li>
        </ul>
    </li>
    <li>aaaa</li>
    <li>aaaa</li>
    <li>aaaa</li>
</ul>

css 代码

* 
    margin:0;
    padding:0;
    text-decoration:none;

.main li 
    display:inline-block;
    background:yellow;
    color:green;

.main > li > ul > li 
    background:orange

.main > li > ul > li > ul >li 
    background:pink;

工作FIDDLE

【问题讨论】：

你不能。抨击规范制定者。

见***.com/questions/45004/…或***.com/questions/1014861/…

不行，用jquery吧。

不幸的是，我只能在评论中回答这个问题，但是有一个用于 :empty 的 CSS 选择器，所以如果你为带有子元素的元素设置样式，然后为没有子元素的 :empty 设置样式，你应该实现你想要的效果。

【参考方案1】：

这在 CSS3 中是不可能的。有一个提议的 CSS4 选择器 $ 可以做到这一点，它可能看起来像这样（选择 li 元素）：

ul $li ul.sub  ... 

请参阅list of CSS4 Selectors here。

作为替代方案，使用 jQuery，您可以使用的单行代码如下：

$('ul li:has(ul.sub)').addClass('has_sub');

然后您可以继续在 CSS 中设置 li.has_sub 的样式。

【讨论】：

根据这个类似的问题：***.com/questions/1014861/… :has() 伪类自 2016 年起不再适用于任何浏览器。这样人们就不会因为它不起作用而感到沮丧。

:has() 应该是提议的 CSS4 选择器，而不是更晦涩的 $ one ...

$ 现在替换为附加到选择器的!。在这里查看更多信息：w3.org/TR/selectors4/#subject

@NicolaeSurdu 你是对的，w3 太落后了

根据 2018 年 2 月的工作草案，! 已替换为 :has()