выбрать второй ребенок

Question

Я пытаюсь использовать это, чтобы выбрать второй тег из списка:

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

, но это не похоже на работу. Есть ли другой, идеально чистый способ CSS (кроме a:nth-child(2)), или кто-нибудь может увидеть, где я ошибся?

Answer 1

Убедитесь, что <li> на самом деле имеет два <a> элементы, как его первых двух детей, и так как они могут быть недействительными :first-child и смежных одноуровневые селекторы не некоторые другие элементы вокруг них.

Если вы просто хотите, чтобы выбрать второй <a> элемент независимо от того, что других типов элементов находятся в вашем <li>, используйте этот селектор:

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

Если <li> будет иметь только ровно 2 <a> элементов, вы можно использовать общий родственный комбинатор ~ для бонусной поддержки IE7/IE8:

.container li a ~ a 

Или вы имеете в виду, чтобы найти <a> элемент во втором <li>, а не второй <a> элемент в <li> (так как «список», вероятно, относится к <ul> или <ol>)? Если это так, вы хотите один из этих селекторов:

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

Answer 2

Просто используйте :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 3

Я подозреваю, что ваши якоря в списке элементов:

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