在到达特定类之前，将CSS应用于一组HTML标签

Question

• List item 1
• List item 2
• List item 3
• List item 4

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li class="active">4</li>
  <li>5</li>
  <li>6</li>
</ul>

有没有一种方式可以通过CSS选择所有在活动类之前或之后的列表元素？

- uneducatedguy

Answer 1

你可以使用 ~ 选择所有位于当前元素之后的同级元素

li.active ~ li
{
    color: green;
}

JSFiddle

---

CSS中，你无法选择在某个元素之前的兄弟元素，所以你需要像这样操作：

给它们所有的规则：

li
{
    color: orange;
}

然后覆盖当前的活动选项

li.active
{
    color: red;
}

然后覆盖后面的那些

li.active ~ li
{
    color: green;
}

JSFiddle

- Liftoff

---

太简单了，喜欢它！谢谢 :) - uneducatedguy

这个答案让我想起了逆转裁判...将问题颠倒过来解决它... - Niet the Dark Absol

Answer 2

只是想指出，另一种方式可能是：

li:not(.active) {
  /* your css rules here */
}

这将选择每个没有类.active的li。

- Alfonso

---

这将选择前面和后面的内容。如果您想要选择前面或后面，您需要使用其他方法。 - Teepeemm