<分区>
标签 css css-selectors
<分区>
假设我有以下 <ul> :
<ul>
<li>Child</li>
<li><span class="active">Child</span></li>
<li>Child</li>
</ul>
我可以更改 <li> 的样式吗？通过 active <span> ？
例如:
.active:parent(li) {
background-color: red;
}
我已经能够使用 jQuery 实现这一点，但它会在屏幕上闪烁一瞬间(等待 DOM 加载)，我想避免这种情况。
最佳答案
您可以使用 has() :
li:has(> .active) {
background-color: red;
}
在 CSS 中无法做到这一点。
最好的办法是做类似的事情:
<ul class="has-active">
<li>Child</li>
<li><span class="active">Child</span></li>
<li>Child</li>
</ul>
和风格
ul.has-active {
...
}
如果您正在寻找可以做父选择器的东西，那么看看像 xpath 这样的东西.
关于css - 通过子项设置父级样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48676386/