css - 将样式应用于除特定选择器及其子元素之外的所有元素

Question

我试图在一个类中设置所有元素的样式，同时排除一个特定的元素和它的子元素。我已经使用:not()选择器进行了几次尝试，但我无法实现我想要的。有什么想法吗？

 <div class="orange">
  <div>text</div>
  <div>text</div>
  <div>text</div>
  <div>text</div>

  <div class="list">
    <ul>
      <li> li text 1</li>
      <li> li text 2 </li>
    </ul>
  </div>

</div>

这是html和样式的链接。 https://stackblitz.com/edit/js-p7krtp?file=style.scss

标签： csssass

Answer 1

使用“>”子组合器：

.orange {
  > :not(.list){
    color: orange
  }
}

这将选择 .orange 的所有不具有 .list 类的子级。