:not pseudo class 不处理多个元素

Question

我有一个元素列表，我想对除 9 和 11 之外的所有元素应用一些更改，所以我这样写：

.myList li:not(:nth-child(9)),
.myList li:not(:nth-child(11)) {
  background-color: greenyellow;
}

<ol class="myList">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
  <li>Nine</li>
  <li>Ten</li>
  <li>Eleven</li>
  <li>Twelve</li>
  <li>Thirteen</li>
  <li>Fourteen</li>
</ol>

此代码无一例外地将更改应用到所有 <li>，但如果我只放一个，它会起作用！像这样：（这种方式将更改应用于除 9 以外的所有内容）

   .myList li:not(:nth-child(9)) {
      background-color: greenyellow;
   }

如何在我的代码中使用 :not 伪 class 放置两个或多个不同的兄弟姐妹编号？

Answer 1

之所以.myList li:not(:nth-child(9)), .myList li:not(:nth-child(11))适用于所有元素，是因为9和11都在至少1个条件下。
9 号不是 11 号 child 所以 css 适用，反之亦然

在你的情况下，你只想做

.myList li:not(:nth-child(9)):not(:nth-child(11)) {
    background-color: greenyellow;
}

以便它选择第 9 或第 11 以外的任何内容

Answer 2

您的代码无效，因为第一行指的是除数字 9（包括数字 11）之外的所有标签，第二行指的是除数字 11（包括数字 9）之外的所有标签，所以这两行一起指到所有的标签。你可以在9号和11号里加一个class 然后你的代码变成了 .myList li:not(.class)

:not pseudo class 不处理多个元素

:not pseudo class not working with more than one element

html

css

css-selectors

pseudo-class