Question

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

到目前为止，我已将样式应用于child元素（如果存在）。但是，如果style有parent，我想parent child，仅使用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

Answer 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样式。

如果父项具有css子项，则将样式应用于父项

1 个答案: