是否有连续兄弟姐妹的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元素才能理解.

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