css - 仅选择不具有已定义类的父元素的元素

Question

我如何只选择在其父树中没有父级的子级？

这没有用:

div:not(.dontSelect) .child

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

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

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

Answer 1

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

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