Question

我们说我有以下<ul>：

<ul>
<li>Child</li>
<li><span class="active">Child</span></li>
<li>Child</li>
</ul>

我是否可以通过<li> active更改<span>的样式？

E.g：

.active:parent(li) {
    background-color: red;
}

我已经能够通过jQuery实现这一点，但它在屏幕上闪烁一瞬间（等待DOM加载），我想避免这种情况。

Answer 1

在CSS中无法做到这一点。

最好的办法是做一些事情：

<ul class="has-active">
    <li>Child</li>
    <li><span class="active">Child</span></li>
    <li>Child</li>
</ul>

风格

ul.has-active  {
    ...
}

如果您正在寻找可以做父选择器的东西，那么请查看xpath之类的内容。

Answer 2

纯CSS无法实现这一点，因为它不能倒退。

您必须使用Javascript或jQuery：

$(document).ready(function(){
    $('li').has('.active').css('background-color','yellow');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<ul>
    <li>Child</li>
    <li><span class="active">Child</span></li>
    <li>Child</li>
</ul>

通过孩子设置父母风格

2 个答案: