html - 使用 :not selector to exclude a div and all its descendants

Question

我遇到这样一种情况，即需要将具有浅黄色背景的紫色字体颜色样式应用于具有 RadDiv 类的 div 之外的所有 div。

这意味着应该排除所有嵌套在类为 RadDiv 的 div 中的 div。

我试过使用 :not 选择器，如下所示，但它不起作用。 Demo of my situation

问题:我如何指定 :not 选择器来排除类为 RadDiv 的 div 以及该 div 中的所有嵌套 div ？

:not 不起作用的选择器

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