课后选择第n个孩子

Question

所以，我有一个 ul 元素列表，我想在 .active 类之后选择前3个 li 元素

<ul>
 <li>The #1</li>
 <li>The #2</li>
 <li class="active">The #3</li>
 <li>The #4</li>
 <li>The #5</li>
</ul>

我在想这样的事情：

ul li.active ~ li:nth-child(n+3)

但它不起作用。任何人都可以帮我解决这个问题吗？

P.S。： .active 是动态变化的，因此任何ul li：nth-​​child（n + 3）都无济于事。

Answer 1

根据您的标记以及层次结构的工作原理，您似乎无法使用选择器上的nth选项执行此操作。

如果您希望在li选择器之后为三个li.active选择器提供红色背景，则可以通过多次追加+ li来在一次通话中将其定位到您的css中根据需要，将选择器组合在一起，如下所示：

li.active + li, 
li.active + li + li, 
li.active + li + li + li {
  color: red;
}

<ul>
 <li>The #1</li>
 <li>The #2</li>
 <li class="active">The #3</li>
 <li>The #4</li>
 <li>The #5</li>
</ul>