CSS3: п-й ребенок) селектор (
CSS селекторы полный справочник по эксплуатации
примеров
Укажите каждый элемент р соответствует цвет фона родительского элемента второго вложенного элемента:
p:nth-child(2)
{
background:#ff0000;
}
{
background:#ff0000;
}
Попробуйте »
Определение и использование
: Nth-ребенок (п) селектор соответствующий родительский элемент п-й элемент.
пможет быть числом, ключевое слово или формула.
Совет: См селектор .Селектор соответствует один и тот же тип п-го родного брата братьев и сестер.
Поддержка браузеров
Цифры в таблице представляют первый браузер для поддержки номер версии имущества.
| 选择器 | |||||
|---|---|---|---|---|---|
| :nth-child() | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
Другие примеры
Пример 1
<Р нечетным и даже может быть использован в качестве ключевого слова, чтобы соответствовать подэлемент используется, его индекс четной или нечетной (индекс первого ребенка равен 1). Здесь мы указываем два разных цвета фона для нечетных и четных р элементов:
p:nth-child(odd)
{
background:#ff0000;
}
p:nth-child(even)
{
background:#0000ff;
}
{
background:#ff0000;
}
p:nth-child(even)
{
background:#0000ff;
}
Попробуйте »
Пример 2
Используя формулу (ап + б) Описание: Размер представителя цикла, N представляет собой счетчик (начиная с 0), и б это смещение. Здесь мы все индексы являются кратными три элемента р определяет цвет фона:
p:nth-child(3n+0)
{
background:#ff0000;
}
{
background:#ff0000;
}
Попробуйте »