是否有连续兄弟姐妹的CSS选择器

Question

我有一个列表：

<ul>
  <li>Something</li>
  <li class="class1">Important</li>
  <li>I want this</li>
  <li>I want this</li>
  <li class="class1">Important</li>
  <li>I want this</li>
  <li>I want this</li>
  <li>Something</li>
  <li>Something</li>
</ul>

在每个.class1元素之后是否有第二个<li>的CSS选择器？

Answer 1

.class1 + li将选择第一个后续兄弟。
.class1 + * + li将选择第二个。

为了保持特异性低，您还可以使用：

.class1 + *,
.class1 + * + * {...}

但这是因为.class1只选择了合适的li元素。

---

这两者都是脆弱的选择者。 很脆弱，当你改变标记时它们会破坏。 考虑添加更多类来定位适当的元素，并保持低特异性。