css - 如何使用:not and :first-child pseudo selectors simultaneously

Question

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