在到达某个类之前，将CSS应用于一组HTML标记

Question

我在无序列表中有一组列表标记，例如：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

有没有办法通过CSS在活动类之前或之后定位所有列表元素？

Answer 1

您可以使用~ 将所有兄弟元素定位在之后

li.active ~ li
{
    color: green;
}

JSFiddle

---

在CSS中，你不能在元素之前定位兄弟姐妹，所以你必须做这样的事情：

给他们一个规则：

li
{
    color: orange;
}

然后覆盖活动的

li.active
{
    color: red;
}

然后覆盖

之后的那些

li.active ~ li
{
    color: green;
}

JSFiddle

Answer 2

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

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

这将选择没有课程li的每个.active