仅选择没有已定义类的父元素的元素

Question

如何仅选择其父级树中没有某个类的父级的子级？

这不起作用：

div:not(.dontSelect) .child

div:not(.dontSelect) .child

div {
  background-color: red;
  padding: 5px;
}

div:not(.dontSelect) .child {
  background-color: green;
  padding: 5px;
}

Answer 1

如前所述，您不能用于:not()排除组合选择器中的祖先，但可以定位您的 .child 类并排除具有特定父级的元素：

.child:not(.dontSelect .child){
    background-color: green;
    padding: 5px;
}

Answer 2

我认为您不能使用组合选择器，:not如文档中所述：

该选择器仅适用于一个元素；你不能用它来排除所有祖先。例如，body :not(table) a仍然适用于表内的链接，因为将与选择器的部分<tr>匹配 。:not()

你可以尝试这样的事情：

div {
  background-color: red;
  padding: 5px;
}

.child {
  background-color: green;
  padding: 5px;
}

.dontSelect .child {
  background-color: initial;
}

<div>
  <div class="child">
    Select this
  </div>
  <div class="dontSelect">
    <div>
      <div class="child">
        Don't select this
      </div>
    </div>
  </div>
</div>