选择第二个孩子

Question

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

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

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

Answer 1

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

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

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

如果您的<li>只有2 <a>个元素，则可以使用常规兄弟组合~获取IE7 / IE8支持：

.container li a ~ a

或者您的意思是找到<a>中的<li>元素而不是<a>中的第二个<li>元素（因为＆＃34;列表＆＃34） ;这里可能是指<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-of-type：

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

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

---

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

Answer 4

使用nth-child（2）

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