javascript - CSS - 给定元素之后的样式元素

Question

如何在元素之后设置样式？例如我有这个:

<ul>
  <li>A</li>
  <li class="hiden">B</li>
  <li>C</li>
  <li>D</li>
  <li class="hiden">E</li>
  <li class="hiden">E</li>
  <li class="hiden">E</li>
  <li>F</li>
</ul>

我希望 li.hiden 之后的每个第一个 li 都有 border-top。

li + li.hiden 只作用于 ul 中的第一个元素。

Answer 1

要在 li.hiden 之后首先定位 li，您应该使用 li.hiden + li 选择器:

li.hiden + li {
    border-top: 1px red solid;
}

<ul>
  <li>A</li>
  <li class="hiden">B</li>
  <li>C</li>
  <li>D</li>
  <li class="hiden">E</li>
  <li>F</li>
</ul>