如何设置样式但排除类及其 children？

Question

我的页面上有 less 样式 div。我想创建一些 less 以排除具有特定 class 的 div 以及它们的所有 children.

这是我的（简体）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;
   }
}

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

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

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 class 的元素而且上面没有 ex-members class。简单的解决方案是删除 &:not.

.ex-members {
  color:green;
}

如何设置样式但排除类及其 children？

How do I set a style but exclude classes and their children?

html

css

less

如何设置样式但排除 类 及其 children？

How do I set a style but exclude classes and their children?

html

css

less

如何设置样式但排除类及其 children？