选择第二个孩子

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

只需使用:nth-of-type：

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

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

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

Answer 3

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

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