Question

我需要在页面上选择所有<div>，但 a div的所有孩子除外，其ID为do-not-select。我当前的选择器是：

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

但是，它不起作用，因为:not运算符不允许复杂的选择器。手动指定所有孩子

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

不是一个选项，因为它们太多了。如何使用当前的CSS3限制编写这样的选择器？

修改：我只能使用一个选择器（我无法使用一个选择器来定位所有div，另一个目标是特定{{1}的所有子项}，否定）

Answer 1

我会这样做：

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

它会选择所有DIV的所有子项，但ID为#do-not-select

的子项除外

* {
  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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

如何否定CSS中的所有孩子？

2 个答案: