选择第二个孩子 [英] select second child

问题描述

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

I am trying to use this to select the second a tag from a list:

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

但是它似乎不起作用.是否还有另一种理想的纯CSS方式(除了a:nth-child(2)之外)，或者有人可以看到我出了问题的地方吗?

but it doesn't seem to work. Is there another, ideally pure CSS way (other than a:nth-child(2)) or can anyone see where I have gone wrong?

推荐答案

请确保您的<li>实际上有两个<a>元素作为其前两个子元素，而周围没有其他元素，因为这些元素可能会使:first-child和相邻的同级选择器.

Make sure your <li> actually has two <a> elements as its first two children, and not some other elements around them since those may be invalidating the :first-child and adjacent sibling selectors.

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

If you just want to select the second <a> element regardless of what other types of elements there are in your <li>, use this selector:

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

如果您的<li>仅包含2个<a>元素，则可以使用通用的同级组合器~来获得对IE7/IE8的额外支持:

If your <li> will only have exactly 2 <a> elements, you can use the general sibling combinator ~ for bonus IE7/IE8 support:

.container li a ~ a

还是您的意思是在第二个<li>中找到<a>元素，而不是在<li>中的第二个<a>元素中找到(因为此处的列表"可能是指<ul>或<ol>) ?如果是这样，您将需要以下选择器之一:

Or did you mean to find the <a> element in the second <li> rather than the second <a> element in a <li> (since "list" probably refers to <ul> or <ol> here)? If so, you'll want either of these selectors:

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

这篇关于选择第二个孩子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！