css nth child来自元素与类

Question

我有一种方法可以从具有某个类的元素中选择（使用css）第n个子元素。例如，对于以下内容，我如何选择带有li的{​​{1}}元素（出于解释目的而显示）？所以基本上我想用id="this"

来说明元素中的第二个元素

class="selected"

Answer 1

实际上你可以使用+选择器。它有点脏，但适用于您的情况。您所需要的只是知道所需元素的确切位置。

.selected + li + li（根据需要添加+ li次）

Answer 2

您使用组合器选择相对于另一个元素的元素（我在这里将其称为参考元素）。

在这种情况下，如果你想要li.selected之后的第二个兄弟，你需要使用两个+兄弟组合子向前推进两个元素：

li.selected + li + li

如上所述，您需要重复+ li n 次以达到参考元素之后的 n （另请参阅{{3} }）。没有n-sibling组合子，:nth-child()不适用于相对选择器。