说明：
我不是CSS专家,但我目前的尝试就是这个.
div:not(.classToBeAvoid) *{
background-color:red;
}
我用英文写的是…
“将红色背景应用于任何没有< div class =”classToBeAvoid“>作为祖先的元素”.
但是,在我的测试中,它似乎并没有像这样工作.
CodePen：
https://codepen.io/anon/pen/eGVBVb
码：
<div class="classToBeAvoid">
<div>
<p>
Shouldn't be a red background on any element around here.
</p>
</div>
</div>
<div>
<p>
Should be a red background
</p>
</div>
div:not(.classToBeAvoid) *{
background-color:red;
}
@H_404_22@
解决方法
你的解释是完全正确的.您正在将红色背景应用于任何< div>这不是类classToBeAvoid.不幸的是,这也适用于孩子< div> s,这是你的第一个< div>的原因.也是红色的(事实上你的第一个父母< div>不是红色,而是它的孩子).
1.一般兄弟选择器〜
您可以使用general siblings selector,这将适用于您的情况,因为您的.classToBeAvoid位于以下< div>之前.元素.
div~:not(.classToBeAvoid)
div~:not(.classToBeAvoid) {
background-color: red;
}
<div class="classToBeAvoid">
<div>
<p>
Shouldn't be a red background on any element around here.
</p>
</div>
</div>
<div>
<p>
Should be a red background
</p>
</div>
2.没有筑巢
如果情况并非总是如此(我假设),一种方法是删除你的< div>嵌套使它工作.
div:not(.classToBeAvoid) {
background-color: red;
}
<div class="classToBeAvoid">
<p>
Shouldn't be a red background on any element around here.
</p>
</div>
<div>
<p>
Should be a red background
</p>
</div>
3.附加课程
如果您不想删除< div>嵌套要么,你可以将类应用到顶级< div> s并将它们用于选择器,即：
.chosen:not(.classToBeAvoid)
.chosen:not(.classToBeAvoid) {
background-color: red;
}
<div class="chosen classToBeAvoid">
<div>
<p>
Shouldn't be a red background on any element around here.
</p>
</div>
</div>
<div class="chosen">
<p>
Should be a red background
</p>
</div>
4.直接子选择器>
如果你也不想给每个顶级< div>另外一个类,您可以使用direct child selector >的父级：
body>div:not(.classToBeAvoid)
body>div:not(.classToBeAvoid) {
background-color: red;
}
<div class="classToBeAvoid">
<div>
<p>
Shouldn't be a red background on any element around here.
</p>
</div>
</div>
<div>
<p>
Should be a red background
</p>
</div>
5.继承
此外,您可以使用您的选择器div：not(.classToBeAvoid),并且另外确保,该子< div> s继承.classToBeAvoid的行为：
.classToBeAvoid div {
background-color: inherit;
}
div:not(.classToBeAvoid) {
background-color: red;
}
.classToBeAvoid div {
background-color: inherit;
}
<div class="classToBeAvoid">
<div>
<p>
Shouldn't be a red background on any element around here.
</p>
</div>
</div>
<div>
<p>
Should be a red background
</p>
</div>
>或5.是我在你的情况下更喜欢的.
@H_404_22@ @H_404_22@