选择第二个孩子答案

【问题标题】：select second child选择第二个孩子
【发布时间】：2018-05-17 18:12:09
【问题描述】：

我正在尝试使用它从列表中选择第二个 a 标签：

.container li a:first-child + a { ... }

但它似乎不起作用。是否有另一种理想的纯 CSS 方式（a:nth-child(2) 除外）或者任何人都可以看到我哪里出错了？

【问题讨论】：

【解决方案1】：

确保您的 <li> 实际上有两个 <a> 元素作为其前两个子元素，而不是它们周围的其他元素，因为这些元素可能会使 :first-child 和相邻的兄弟选择器无效。

如果您只想选择第二个 <a> 元素而不管您的 <li> 中还有哪些其他类型的元素，请使用此选择器：

.container li a:nth-of-type(2)

如果您的 <li> 将只有 2 个 <a> 元素，您可以使用通用兄弟组合 ~ 获得额外的 IE7/IE8 支持：

.container li a ~ a

或者您的意思是在第二个<li> 中找到<a> 元素，而不是在<li> 中的第二个<a> 元素（因为“列表”在这里可能指的是<ul> 或<ol>） ?如果是这样，您将需要以下任一选择器：

.container li:first-child + li a
.container li:nth-child(2) a

【讨论】：

或者，您知道，您可以使用 .container li a ~ a ~ a 反转后续元素的样式。
@Felipe Alsacreations：我似乎记得你 tagging this question 和 [css-selectors] 有一段时间了......我应该感谢你，因为我非常喜欢 CSS 选择器，并且我想我终于可以得到一枚金徽章了，因为今晚我认为这是一个相当不起眼的标签。所以非常感谢！ :)
我花了一段时间才得到它。我无法想象有人在这个标签上有近 1000 个赞：)

【解决方案2】：

我怀疑您的锚点在列表项中：

<ul class="container">
    <li><a href="">...</a></li>
    <li><a href="">...</a></li>
    <li><a href="">...</a></li>
</ul>

在这种情况下，您必须将样式重写为：

.container li:first-child + li a { ... }

【讨论】：

【解决方案3】：

只需使用:nth-of-type:

.container li a:nth-of-type(2) {
    /* ... */
}

这里的问题可能是第一个<a>不是第一个孩子，或者第二个<a>不相邻。无论如何，:nth-of-type 是正确的做法。

如果每个<li> 都有一个<a>，那么您的意思可能是.container li:nth-of-type(2) a。

【讨论】：

【解决方案4】：

使用 nth-child(2)

.container li a:nth-child(2){....}

【讨论】：