пример
Укажите цвет фона для каждого <p> элемент , который является вторым р элементом его родителя:
p:nth-of-type(2)
{
background: #ff0000;
}
Попробуй сам " Больше "Try it Yourself" примеры ниже.
Определение и использование
:nth-of-type( n ) селектор соответствует каждому элементу , который является n - го ребенка, определенного типа, своего родителя.
n может быть числом, ключевое слово или формула.
Tip: Посмотрите на : п-й ребенок () селектор , чтобы выбрать элемент , который является n - го ребенка, regardless of type , своего родителя.
| Версия: | CSS3 |
|---|
Поддержка браузеров
Числа в таблице определяет первую версию браузера, который полностью поддерживает селектор.
| селектор | |||||
|---|---|---|---|---|---|
| :nth-of-type() | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
CSS Синтаксис
Еще примеры
пример
Нечетные и даже ключевые слова , которые могут быть использованы , чтобы соответствовать дочерние элементы, индекс или нечетным (the index of the first child is 1) .
Здесь мы указываем два разных цвета фона для нечетных и четных р элементов:
p:nth-of-type(odd)
{
background: #ff0000;
}
p:nth-of-type(even)
{
background: #0000ff;
}
Попробуй сам " пример
Используя формулу ( an + b ) . Описание: представляет размер цикла, a n является счетчик (starts at 0) , и b представляют собой значение смещения.
Здесь мы указываем цвет фона для всех р элементов, индекс которых кратно 3:
p:nth-of-type(3n+0)
{
background: #ff0000;
}
Попробуй сам "