本文介绍了具有CSS的多个子代子选择器的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
在下面检查此代码:
.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>
我想匹配所有.ccc
元素,这些元素是.aaa
的子元素,但不是.bbb
的子元素.这意味着上面的代码不应使AQUI字变成红色,但无论如何它都会变成红色.我在做什么错了?
I want to match all .ccc
element that are children of .aaa
but are not children of .bbb
. It means that the code above should NOT make the AQUI word be RED, but it gets RED anyway. What am I doing wrong?
推荐答案
not(.bbb)
将匹配任何不带类.bbb
的div,并且您在.aaa
和.ccc
之间有很多这样的内容,这就是为什么文本是红色的.要执行您想要的操作,您需要考虑两个选择器
The not(.bbb)
will match any div without the class .bbb
and you have a lot of them between .aaa
and .ccc
that why the text is red. To do what you want you need to consider two selectors
.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>
这篇关于具有CSS的多个子代子选择器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!