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

egdjgwm8  于 2023-02-06  发布在  其他
关注(0)|答案(2)|浏览(204)

我试图在一个类中设置所有元素的样式,同时排除一个特定的元素及其子元素。我已经尝试了几次使用**: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

fwzugrvs

fwzugrvs1#

使用“〉”child combinator

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

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

7lrncoxx

7lrncoxx2#

当我试图找到这种方法的解决方案时,最有效的方法是在fiddle中尝试它。我发现公认的答案并不完全正确,因为语法应该是:

.orange > :not(.list)
{
   background-color: orange;
}

相关问题