css 选择二胎

nwo49xxi 于 2024-01-09 发布在其他

关注(0)|答案(3)|浏览(141)

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

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

字符串
但似乎不起作用。有没有其他理想的纯CSS方法（除了a:nth-child(2)），或者有人能看出我错在哪里？

3条答案

确保<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>元素（因为“list”在这里可能指的是<ul>或<ol>）？如果是这样，你需要以下选择器之一：

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

型

我怀疑你的锚在列表项目中：

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

型

使用nth-child(2)：

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

字符串