一尘不染

如果样式中的子项带有css,则将样式应用于父项

html

我想申请stylesparent它是否有child元素。

到目前为止,我已经将样式应用于child元素(如果存在)。但我想styleparent,如果parentchild,仅使用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;
}

阅读 321

收藏
2020-05-10

共1个答案

一尘不染

CSS3不可能。有一个建议的CSS4选择器,$可以做到这一点,它看起来像这样(选择li元素):

ul $li ul.sub { ... }

作为替代方案,使用jQuery,您可以利用的单行代码是这样的:

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

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

2020-05-10