Question

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

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

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

问题：如何指定: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

：不是选择器不是那么强大，它在更复杂的情况下不会按照你想要的方式工作。实现您想要的最简单方法可能是覆盖.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选择器可用于排除任何兄弟（包括其后代）。

Revised Fiddle

参考文献：

使用：不是选择器来排除div及其所有后代

2 个答案: