CSS :not伪类同时排除多个子元素失效，如何正确实现？

嘿，你踩了一个很容易犯的逻辑陷阱！你当前的选择器逻辑其实和你想要的正好相反——用逗号分隔两个:not()选择器，相当于**「不是第9个」OR「不是第11个」**。那你想想：第9个元素满足「不是第11个」，第11个元素满足「不是第9个」，剩下的元素两个条件都满足，结果自然是所有<li>都被选中了。

下面给你两种可行的解决方案：

方案1：CSS4 多选择器:not()（推荐，现代浏览器支持） #

从CSS选择器Level 4开始，:not()允许在括号内同时放多个用逗号分隔的选择器，直接实现**「既不是A，也不是B」**的逻辑，完美匹配你的需求：

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

对应的HTML结构保持不变：

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

方案2：CSS3 链式:not()（兼容旧浏览器） #

如果需要兼容IE9这类不支持CSS4多选择器的旧浏览器，可以用链式的:not()写法，两个:not()叠加同样能实现「不是第9个 且 不是第11个」的逻辑：

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

这两种写法都会让第9个和第11个<li>保持默认样式，其余元素都应用greenyellow背景色，完全达到你想要的排除效果。

内容的提问来源于stack exchange，提问作者Soul Eater