在达到某个 class 之前将 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 定位活动 class 之前或之后的所有列表元素？

Answer 1

您可以将 after 与 ~

的所有兄弟元素作为目标

li.active ~ li
{
    color: green;
}

在 CSS 中，您不能在元素之前定位兄弟姐妹，因此您必须这样做：

给他们一个规则：

li
{
    color: orange;
}

然后覆盖激活的

li.active
{
    color: red;
}

然后覆盖

之后的

li.active ~ li
{
    color: green;
}

Answer 2

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

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

这将 select 每个 li 没有 class .active

Apply CSS to a group of HTML tags before reaching a certain class