html – 只有在祖先不包含某个类的情况下才可以应用CSS吗？

概述说明： 我不是CSS专家,但我目前的尝试就是这个. div:not(.classToBeAvoid) *{ background-color:red;} 我用英文写的是… “将红色背景应用于任何没有< div class =”classToBeAvoid“>作为祖先的元素”. 但是,在我的测试中,它似乎并没有像这样工作. CodePen： https://codepen.io/anon/ 说明：

我不是CSS专家,但我目前的尝试就是这个.

div:not(.classtoBeAvoID) *{    background-color:red;}

我用英文写的是…

“将红色背景应用于任何没有< div class =”classtoBeAvoID“>作为祖先的元素”.

但是,在我的测试中,它似乎并没有像这样工作.

CodePen：

https://codepen.io/anon/pen/eGVBVb

码：

<div >  <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;}

解决方法 你的解释是完全正确的.您正在将红色背景应用于任何< div>这不是类classtoBeAvoID.不幸的是,这也适用于孩子< div> s,这是你的第一个< div>的原因.也是红色的(事实上你的第一个父母< div>不是红色,而是它的孩子).

有几种方法可以解决这个问题(至少有一些权衡取舍).

1.一般兄弟选择器〜

您可以使用general siblings selector,这将适用于您的情况,因为您的.classtoBeAvoID位于以下< div>之前.元素.

div~:not(.classtoBeAvoID)

div~:not(.classtoBeAvoID) {  background-color: red;}

<div >  <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 >  <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 >  <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>

4.直接子选择器>

如果你也不想给每个顶级< div>另外一个类,您可以使用direct child selector >的父级：

body>div:not(.classtoBeAvoID)

body>div:not(.classtoBeAvoID) {  background-color: red;}

<div >  <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 >  <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.是我在你的情况下更喜欢的.

总结

以上是内存溢出为你收集整理的html – 只有在祖先不包含某个类的情况下才可以应用CSS吗？全部内容，希望文章能够帮你解决html – 只有在祖先不包含某个类的情况下才可以应用CSS吗？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。