如何同时使用 :not 和 :first-child 伪选择器

Question

我想使用:not 和:first-child 伪类选择第一个li 没有 class="test"。在此示例中，我尝试将蓝色设置为 <li>Third</li>:

ul li {
    color:red;
}

ul li:not(.test):first-child {
    color:blue;
}

<ul>
    <li class="test">First</li>
    <li class="test">Second</li>
    <li>Third</li>
    <li>Fourth</li>
</ul>

Answer 1

为什么不执行以下操作，它使用规则组合来过滤您需要的项目（您可以组合规则 #1 和 #3）。

这有一个额外的好处，它与类.test的第一个项目的索引无关

ul li { /* <-- select all list items */
  color: red;
}
li:not(.test) { /* <-- select all list which arent test */
  color: blue;
}
ul li:not(.test) ~ li { /* <-- select all list items which follow an item without test */
  color: red;
}

<ul>
  <li class="test">First</li>
  <li class="test">Second</li>
  <li>Third</li>
  <li>Fourth</li>
</ul>