是否有连续兄弟姐妹的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>

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

Answer 1

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

为了保持特异性低，你也可以使用：

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

但我们知道.class1只会选择合适的li元素。

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