select second child | 易学教程

问题

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

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

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?

回答1:

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.

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)

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

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

回答2:

I suspect your anchors are within list items:

<ul class="container">
    <li><a href="">...</a></li>
    <li><a href="">...</a></li>
    <li><a href="">...</a></li>
</ul>

In that case, you have to rewrite the style to:

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

回答3:

Just use :nth-of-type:

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

The problem here is probably that the first <a> is not the first child, or the second <a> is not adjacent to it. Regardless, :nth-of-type is the right way to do it.

If you have one <a> per <li>, then you probably mean .container li:nth-of-type(2) a.

回答4:

Use nth-child(2)

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

来源：https://stackoverflow.com/questions/9550401/select-second-child

标签

css

css-selectors