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

类的第一个项目的索引无关

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: