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

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作为stated in the documentation的组合选择器：

  

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

您可以尝试这样的事情：

＆＃13;

＆＃13;

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

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果您可以使用id作为主div：

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

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

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