html - 如何设置样式但排除类及其子类？

Question

我有 less 在我的页面上设计一个 div。我想创建一些 less 以排除具有特定类的 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>

这是我尝试使用的 less:

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

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

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

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>