课后选择第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)

但它不起作用.有人可以帮我解决这个问题吗？

PS:Class .active是动态变化的,所以任何ul li:nth-​​child(n + 3)都无济于事.

Answer 1

看来你不能使用nth基于标记的选择器选项以及层次结构的工作方式来执行此操作.

如果你想在li选择器后面给三个选择li.active器一个红色背景,你可以在一次调用中将它们定位在你的css中,方法是+ li根据需要追加多次,将选择器分组在一起,如下所示:

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>