html - :not pseudo class not working with more than one element

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>无一异常(exception)，但如果我只放一个就可以了!像这样:(这种方式将更改应用于除 9 之外的所有内容)

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

如何在我的代码中使用:not伪类放置两个或多个不同的 sibling 数字？

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 的东西