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

Question

我在无序列表中有一组列表标记,例如:

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

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

Answer 1

您可以针对所有兄弟元素后用~

li.active ~ li
{
    color: green;
}

的jsfiddle

在CSS中,您不能在元素之前定位兄弟节点,因此您必须执行以下操作:

给他们一个规则:

li
{
    color: orange;
}

然后覆盖活动的那个

li.active
{
    color: red;
}

然后覆盖之后的那些

li.active ~ li
{
    color: green;
}

的jsfiddle