выберите второго ребенка

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

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

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

Answer 3

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

Используйте nth-child (2)

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