css 选择二胎

nwo49xxi  于 5个月前  发布在  其他
关注(0)|答案(3)|浏览(52)

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

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

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

nimxete2

nimxete21#

确保<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

jtjikinw

jtjikinw2#

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

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

svgewumm

svgewumm3#

使用nth-child(2)

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

字符串

相关问题