选择第二个孩子

Question

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

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

但似乎不起作用。是否还有另一种理想的纯CSS方式（除了

a:nth-child(2)

）或者任何人都可以看到我哪里出了问题？

Answer 1

确保您的

<li>

实际上有两个

<a>

元素作为其前两个子元素，而不是它们周围的其他元素，因为这些元素可能会使

:first-child

和相邻的同级选择器无效。

如果您只想选择第二个

<a>

元素，而不管

<li>

中还有哪些其他类型的元素，请使用此选择器：

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

如果您的

<li>

只有 2 个

<a>

元素，您可以使用通用同级组合器

~

来获得额外的 IE7/IE8 支持：

.container li a ~ a

或者您的意思是在第二个

<a>

中查找

<li>

元素，而不是在

<a>

中找到第二个

<li>

元素（因为“列表”可能指的是

<ul>

或

<ol>

）？如果是这样，您将需要以下选择器之一：

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

Answer 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 { ... } 

Answer 3

使用

nth-child(2)

：

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