带有css的多子选择器
带有css的多子选择器
提问于 2018-09-24 21:57:55
检查下面的代码：
.aaa :not(.bbb) .ccc {
font-size: 20px;
color: #FF0000;
}<div class="aaa">
<div>
<div>
<div class="bbb">
<div>
<div>
<div class="ccc">AQUI</div>
</div>
</div>
</div>
</div>
</div>
</div>
我希望匹配.aaa的子元素但不是.bbb的子元素的所有.ccc元素。这意味着上面的代码不应该让AQUI单词变成红色，但无论如何它都会变成红色。我做错了什么？
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-09-24 22:04:03
not(.bbb)将匹配任何没有.bbb类的div，在.aaa和.ccc之间有很多这样的类，这就是为什么文本是红色的。要做你想做的事情，你需要考虑两个选择器
.aaa .ccc {
font-size: 20px;
color: #FF0000;
}
/*we reset the style if children of .bbb*/
.bbb .ccc {
color: initial;
font-size:initial;
}<div class="aaa">
<div>
<div>
<div class="bbb">
<div>
<div>
<div class="ccc">AQUI</div>
</div>
</div>
</div>
</div>
</div>
</div>
Stack Overflow用户
发布于 2018-09-24 22:02:49
实际上有一些元素不是.bbb的-在本例中是.bbb之前和之后的两个div。为了让它起作用，你需要更具体。您可以添加另一个类(本例中为zzz)，如果该类未与.bbb组合，则将应用该规则。
.aaa .zzz:not(.bbb) .ccc {
font-size: 20px;
color: #FF0000;
}<div class="aaa">
<div>
<div>
<div class="zzz bbb">
<div>
<div>
<div class="ccc">AQUI</div>
</div>
</div>
</div>
</div>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52481037
复制相关文章
相似问题
腾讯云开发者
