:not 伪类不能使用多个元素答案

【问题标题】：:not pseudo class not working with more than one element:not 伪类不能使用多个元素
【发布时间】：2018-05-30 05:04:33
【问题描述】：

我有一个元素列表，我想对所有元素应用一些更改，除了 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 伪类放置两个或多个不同的同级编号？

【问题讨论】：

标签： html css css-selectors pseudo-class

【解决方案1】：

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

在你的情况下，你只是想做

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

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

【讨论】：

【解决方案2】：

您的代码不起作用，因为第一行引用了所有标签 exept 编号 9（包括编号 11），第二行引用了所有标签 exept 编号 11（包括编号 9）所以这两行一起引用所有标签。您可以在 9 号和 11 号的 li 中添加一个类然后你的代码变成了 .myList li:not(.class)

【讨论】：