Вопрос по css, html, css-selectors – Нужны некоторые пояснения по HTML, nth-child

2

ПРИМЕЧАНИЕ: ПОСМОТРЕТЬ НИЖЕ ДЛЯ ЧЕТКОГО ОБЪЯСНЕНИЯ

Я пытаюсь понять, почему это происходит.

jsFiddle 1 - До

HTML

<div class="chicken">
    <div class="big-chix">Contento</div>
    <div class="big-chix">Contento</div>
    <div class="big-chix">Contento</div>
    <div class="big-chix">Contento</div>
    <div class="big-chix">Contento</div>
    <div class="big-chix">Contento</div>
</div>

CSS

.chicken { width:100%; background:#999; float:left; }

.big-chix { width:48%; margin:0.5%; padding:0.5%; background:#666; float:left; }

.big-chix:nth-child(2n+1) { background-color:#eee; }
.big-chix:nth-child(2n+2) { background-color:#aaa; }

Здесь я пытаюсь достичь другого фона.big-chix класс для n-х детей 1, 3, 5 ... и 2, 4, 6 ...

Но когда я вставляю абзац (или что-то еще, например, div и т. Д. В этом отношении), это становится так:

jsFiddle 2 - после

HTML

<div class="chicken">
    <p>paragraphy</p>
    <div class="big-chix">Contento</div>
    <div class="big-chix">Contento</div>
    <div class="big-chix">Contento</div>
    <div class="big-chix">Contento</div>
    <div class="big-chix">Contento</div>
    <div class="big-chix">Contento</div>
</div>

CSS

.chicken { width:100%; background:#999; float:left; }

.big-chix { width:48%; margin:0.5%; padding:0.5%; background:#666; float:left; }

.big-chix:nth-child(2n+1) { background-color:#eee; }
.big-chix:nth-child(2n+2) { background-color:#aaa; }

Размещение nth ребенка меняет местами. Почему это так? не.big-chix:nth-child() только предположим, чтобы выбрать все.big-chix классы (что 6.big-chix), затем установите 1, 3, 5 вbackground-color из#eeeи 2, 4, 6 до#aaa?

РЕДАКТИРОВАТЬ: Из того, что я собираю,nth-child не будет применяться к дочернему элементу в родительском элементе в коде, подобном следующему:

jsFiddle - nth-child (1), когда<p> абзац является первым элементом

HTML

<div class="chicken">
    <p>paragraphy</p> [this is nth-child(1)]
    <div class="big-chix">Contento</div> [this is nth-child(2)]
    <div class="big-chix">Contento</div> [this is nth-child(3)]
    <div class="big-chix">Contento</div> [this is nth-child(4)]
    <div class="big-chix">Contento</div> [this is nth-child(5)]
    <div class="big-chix">Contento</div> [this is nth-child(6)]
    <div class="big-chix">Contento</div> [this is nth-child(7)]
</div>

CSS

.chicken { width:100%; background:#999; float:left; }

.big-chix { width:48%; margin:0.5%; padding:0.5%; background:#666; float:left; }

.big-chix:nth-child(1) { background-color:#eee; }

НО, он будет работать в родительском элементе, который имеет.big-chix в качестве первого элемента.

jsFiddle - n-й ребенок с.big-chix как первый элемент

HTML

<div class="chicken">
    <div class="big-chix">Contento</div> [this is nth-child(1)]
    <p>paragraphy</p> [this is nth-child(2)]
    <div class="big-chix">Contento</div> [this is nth-child(3)]
    <div class="big-chix">Contento</div> [this is nth-child(4)]
    <div class="big-chix">Contento</div> [this is nth-child(5)]
    <div class="big-chix">Contento</div> [this is nth-child(6)]
    <div class="big-chix">Contento</div> [this is nth-child(7)]
</div>

CSS

.chicken { width:100%; background:#999; float:left; }

.big-chix { width:48%; margin:0.5%; padding:0.5%; background:#666; float:left; }

.big-chix:nth-child(1) { background-color:#eee; }
Я не мог найти ответ, хотя, возможно, я искал неправильные ключевые слова. вот почему я спросил .. ну хорошо. по крайней мере, я учусь. Kyle Yeo
для меня это было полезно Ritabrata Gautam
Нет, это не так, но об этом спрашивали много раз. Некоторым людям не нравится видеть один и тот же вопрос много раз, даже если это не обязательно дубликат. BoltClock♦
это плохой вопрос? Я только пытаюсь учиться. Kyle Yeo
:nth-child() очень неправильно понято, но на самом деле не так много ключевых слов. Ваш вопрос мне подходит, так что не беспокойтесь о своенравных отрицательных голосах. BoltClock♦

Ваш Ответ

2   ответа
-2

использовать эти

.big-chix:nth-child(even) { background-color:#eee; }
.big-chix:nth-child(odd) { background-color:#aaa; }

работает вhttp://jsfiddle.net/TeqUF/2/

это не то, что спросили .... и все еще проблема остается Ritabrata Gautam
9

nth-child () предполагает только выбор всех классов .big-chix (то есть 6 .big-chix), затем установите 1, 3, 5 в качестве цвета фона #eee, а 2, 4, 6 до # аааа?

Нет.

:nth-child() выбирает «n-й элемент в родительском элементе», а не «n-й элемент, который также соответствует другим частям селектора».

Каждый селектор применяется независимо, и только элементы, которые соответствуют всем компонентам, будут соответствовать полному селектору.

Обратите внимание, однако, что есть:nth-of-type() который должен делать то, что вы хотите.

@Quentin ... эй, пожалуйста, обновите его вторую скрипку с вашим решением:nt-of-type. Ritabrata Gautam
«Обратите внимание, однако, что есть:nth-of-type() который должен делать то, что вы хотите ". Но только потому, что этоdiv элементы, тогда как добавленный элемент являетсяp элемент..big-chix класс не имеет значения. BoltClock♦
@RenoYeo - Нет, он выберет второй элемент вdiv если этотакже член класса.big-chix. Quentin
@Quentin thediv? которыйdiv? .chicken, или же.big-chix? Kyle Yeo
Так что вы имеете в виду, если я подам заявку.big-chix:nth-child(2), он выберет 2-й элемент изdiv, .chicken? Kyle Yeo

Похожие вопросы