css 第 n 个子元素来自具有类的元素答案

【问题标题】：css nth child from element with classcss 第 n 个子元素来自具有类的元素
【发布时间】：2016-02-05 22:51:07
【问题描述】：

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

<ul>
    <li></li>
    <li class="selected"></li>
    <li></li>
    <li id="this"></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

【问题讨论】：

不，nth-child 不能这样工作。它根据父级以下的索引对子级进行编号。您当然可以为该元素中的第二个元素写.selected + li + li，但如果它说是第 8 个孩子，那就太多了。
除了使用 js 之外，还有其他方法吗？

【解决方案1】：

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

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

【讨论】：

为什么你认为它很脏？这就是+ 制作的目的。
这实际上可以作为它在具有选定类的元素之后的第二个我需要的。谢谢，我试试看
@BoltClock 因为如果 position 不是 second 它的代码太多，并且它对 DOM 更改非常敏感。我宁愿想想怎么做的更清楚，更好的定制
@WinK-：选择器在设计上对 DOM 结构很敏感。 OP 的用例取决于结构无论如何。
@BoltClock 没有人否认选择器对 DOM 结构很敏感。但关键是，如果有人对 +table+div+table+div+table+div+div 像 7 个元素或 +li+li+li+li+li 感兴趣。然后使用+:nth-sibling(8) 或+li:nth-sibling(5) 会更干净，但不存在这样的设施。

【解决方案2】：

您使用组合符来选择一个相对于另一个元素的元素（我将在此将其称为 reference 元素）。

在这种情况下，由于您想要li.selected 之后的第二个兄弟，您需要使用两个+ 兄弟组合子向前移动两个元素：

li.selected + li + li

如前所述，您将需要重复 + li n 次才能到达参考元素的第 n 个后续兄弟（另请参阅 this related answer）。没有 nth-sibling 组合器，:nth-child() 不是为使用相对选择器而设计的。

【讨论】：