Почему селектор: nth-child (2) работает так, как я ожидаю: first-child?

Question

У меня есть пример того, что я пытаюсь спросить.

Я часто использую этот формат. Я ожидал, что смогу выбрать этот первый div с помощью fieldset div:first-child { }, но кажется, что он захватывается только вторым дочерним селектором. Я ожидаю, что «поле 1» будет красным, а не синим. Семантически более логично (по крайней мере для меня) сказать «стилизовать первый div в наборе полей так, как это делается» вместо того, чтобы произносить 2nd.

Почему это происходит и есть ли способ добиться желаемого эффекта (чтобы можно было вызывать div: first-child)?

Answer 1

Селектор :nth-child игнорирует тип элементов. div:nth-child(2) выбирает <div>, который является вторым дочерним элементом.

Если вы хотите выбрать первый div, используйте селектор :nth-of-type(1) или :first-of-type.

Демо: http://jsfiddle.net/Z3Bcq/1/

Answer 2

Вот объяснение того, как: nth-child селектор работает:

Этот псевдокласс сопоставляет элементы на основе их позиций в списке дочерних элементов родительского элемента.Псевдокласс принимает аргумент N, который может быть ключевым словом, числом или числовым выражением в форме + b.Для получения дополнительной информации см. Понимание: Выражения псевдокласса nth-child.

Если N - числовое или числовое выражение, то: nth-child (N) соответствует элементам, которым предшествуют N-1 братья или сестры вдерево документа.

Следующие селекторы примеров эквивалентны и будут соответствовать нечетным строкам таблицы:

tr:nth-child(2n+1) {
  ⋮ declarations
}
tr:nth-child(odd) {
  ⋮ declarations
}

Этот селектор примера будет соответствовать первым трем строкам любой таблицы:

tr:nth-child(-n+3) {
  ⋮ declarations
}

Этот пример селектора будет соответствовать любому абзацу, который является первым дочерним элементом его родительского элемента:

p:nth-child(1) {
  ⋮ declarations
}

Это, конечно, эквивалентно селектору p:first-child.

Примечание: для получения более подробной информации о селекторе, пожалуйста, перейдите по ссылке: http://reference.sitepoint.com/css/pseudoclass-nthchild

Answer 3

В этом случае <legend>, предшествующий первому div, является фактическим :first-child их общего родителя.Вы можете использовать селектор :nth-of-type.

Fiddle здесь