如何否定CSS中的所有children？

Question

我需要 select 页面上的所有 <div>，除了 a div 的所有 children do-not-select 的 ID。我目前的 select 或者是：

div:not(#do-not-select *)

但是，它不起作用，因为 :not 运算符不允许复杂的 selectors。手动指定所有 children

div:not(#child1):not(#child2):not(#child3)...

不是一个选项，因为它们太多了。在当前的 CSS3 限制下，我该如何编写这样的 selector？

编辑： 我只能使用一个 selector（我不能用一个 selector 来定位所有 divs ，另一个目标是特定 div 的所有 children，以否定）

Answer 1

我会这样做：

div:not(#do-not-select) * { ... }

它选择除 ID 为 #do-not-select

之外的所有 DIV 的所有子项

* {
  border: 1px solid red;
  padding: 3px;
}

div:not(#do-not-select) * {
  background-color: green;
}

<div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
<div id="do-not-select">
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

Answer 2

article > div {
  border: 1px solid green;
  height: 100px;
  width: 100px;
  margin: 10px;
}

article > div:not(#do-not-select) > div {
  height: 20px;
  width: 80%;
  margin: 5px;
  background-color: green;
}

<article>
  <div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div id="do-not-select">
    <div></div>
    <div></div>
    <div></div>
  </div>
</article>

如何否定CSS中的所有children？

How to negate all children in CSS?

css

css-selectors

negation