Question

我的页面上有一个div的样式。我想创建更少的东西来排除特定班级的div，以及他们所有的孩子。

这是我的（简体）html：

<div class='people'>
    <div>
        <!--This text should be green-->
        Bob
    </div>
    <div>
        <!--This text should be green-->
        Geoff
    </div>
    <div class="ex-members">
        <div>
            <!--This text should remain red--> 
            Mary
        </div>
        <div>
            <!--This text should remain red--> 
            Fred
        </div>
    </div>
</div>

这是我尝试使用的越少：

body {
   color:red;
}
.people {
   &:not(.ex-members) {
      color:green;
   }
}

但这似乎只是将所有名称都设为绿色。

N.B。我当然可以通过覆盖绿色并将前成员再次设置为黑色来解决这个问题，但我想尽可能避免这样做。

Answer 1

您可以使用直接后代选择器>

.people {
   > :not(.ex-members){
      color:green;
   }
}

编译为......

body {
  color: red;
}

.people> :not(.ex-members) {
  color: green;
}

<div class='people'>
  <div>
    <!--This text should be green-->
    Bob
  </div>
  <div>
    <!--This text should be green-->
    Geoff
  </div>
  <div class="ex-members">
    <div>
      <!--This text should remain red-->
      Mary
    </div>
    <div>
      <!--This text should remain red-->
      Fred
    </div>
  </div>
</div>

Answer 2

您的ex-members div位于您的people div中，而您的第二种风格正在寻找具有people类且没有ex-members类的元素。简单的解决方案是删除&:not。

.ex-members {
  color:green;
}

如何设置样式但排除班级及其子项？

2 个答案: