使用 :not 选择器排除 div 及其所有后代

Question

我有一种情况，需要将浅黄色背景的紫色字体颜色样式应用于具有

RadDiv

类的 div 之外的所有 div。

这意味着嵌套在类为

RadDiv

的 div 中的所有 div 都应被排除。

我尝试使用

:not

选择器，如下所示，但它不起作用。 我的情况演示

问题：如何指定

:not

选择器来排除具有

RadDiv

类的div以及该div内的所有嵌套div？

：不是不起作用的选择器

div:not(.RadDiv) div   {
  background-color:lightyellow;
  color:purple;
  }

我尝试过的完整代码

<div>This is a div </div>
<div class="RadDiv newDiv outerDiv">
    <div class="header">
      This is the header
    </div>

     This is an outer div

     <div class="alert highlight">
      This div stands out
    </div>
    <div class="footer disclaimer">
     This is the footer part
    </div>
    <table>
      <tr>
       <td>
         <div>This is div inside a table element</div>
       </td>
      </tr>
    </table>
</div>
<div id="div1">This is div1</div>
<div id="div2">This is div2</div>
<style>
div:not(.RadDiv) div   {
  background-color:lightyellow;
  color:purple;
  }
  .outerDiv {
      border:1px solid red;
      font-family:Arial;
  }
  .footer {
    color:lightgray;
    font-size:small;
    font-style:italic;
    }
    .header {
    font-weight:bold;
    }

Answer 1

:not 选择器不是那么强大，并且在更复杂的情况下它不能按照您希望的方式工作。实现您想要的最简单的方法可能是覆盖 .RadDiv 样式：

div {
  background-color:lightyellow;
  color:purple;
  }
.RadDiv, .RadDiv div {
  background: transparent;
  color: black;
}

Answer 2

将所有同级别的div视为兄弟姐妹。因此，首先选择父级：

body > div:not(.RadDiv) {
    background-color: lightyellow;
    color: purple;
}

使用子组合器 (

>

)，仅针对一级，并且

:not

选择器可用于排除任何同级（包括其后代）。

修订小提琴

参考资料：

• 6.6.7。否定伪类
• 8.2。子组合器

Answer 3

div:not(.RadDiv, .RadDiv div) {
    background-color: lightyellow;
    color: purple;
}

将选择所有不属于

class="RadDiv"

且不是

class="RadDiv"

元素的子元素、孙元素等的 div