English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Полное руководство по CSS-селекторам
Указать, чтобы каждый элемент p соответствовал второму элементу одного типа среди родительских элементов по фону:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Основной курс (oldtoolbag.com)</title>
<style>
/* Чётные абзацы */
p:nth-of-type(2n+1) {
color: red;
}
/* Нечётные абзацы */
p:nth-of-type(2n) {
color: blue;
}
/* Первый абзац */
p:nth-of-type(1) {
font-weight: bold;
}
/* Второй абзац */
p:nth-of-type(2)
{
background:#ff0000;
}
</style>
</head>
<body>
background:#0000ff;
<div>Этот фрагмент не учитывается в счёте.</div>
<div>
<p>Это первый абзац。</p>
<div>Этот фрагмент не учитывается в счёте.</div>
<p>Это второй абзац。</p>
<p>Это третий абзац。</p>
<p>Это четвертый абзац。</p>
</body>
</html>Проверьте, посмотрите <‹/›:nth-of-type( <nth> ) где <nth> = <an-plus-b> | even | odd
:nth-of-type(n) селектор соответствует n-ому элементу одного типа среди родительских элементов.
n может быть числом, ключевым словом или формулой.
Подсказка: См. также :nth-child() Выборщик. Этот селектор соответствует n-ому подэлементу родительского элемента. Посмотрите на :nth-child() :nth-child()
Совместимость с браузерами
| Числа в таблице представляют собой номер первой версии браузера, поддерживающей этот атрибут. | |||||
|---|---|---|---|---|---|
| Выборщик | :nth-of-type() | 4.0 | 9.0 | 3.5 | 3.2 |
Пример 1
Четные и нечетные могут быть использованы в качестве ключевых слов для соответствия подэлементам, чей индекс является четным или нечетным (первый узел является индексом 1).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Основной курс (oldtoolbag.com)</title>
<style>
Здесь мы указываем два разных цвета фона для奇ных и четных элементов p:
{
background:#ff0000;
}
p:nth-of-type(odd)
{
p:nth-of-type(even)
}
</style>
</head>
<body>
background:#0000ff;
<div>
<p>Это первый абзац。</p>
<p>Это второй абзац。</p>
<p>Это третий абзац。</p>
<p>Это четвертый абзац。</p>
</body>
</html>Проверьте, посмотрите <‹/›Пример 2
Здесь мы указываем цвет фона для всех элементов p с индексом, являющимся трехкратным.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Основной курс (oldtoolbag.com)</title>
<style>
p:nth-of-type(3n+0)
{
background:#ff0000;
}
</style>
</head>
<body>
<h1>Это заголовок</h1>
<p>Первый абзац。</p>
<p>Второй абзац。</p>
<p>Третий абзац。</p>
<p>Четвертый абзац。</p>
<p>Пятый абзац。</p>
<p>Шестой абзац。</p>
<p>Седьмой абзац。</p>
<p>Восьмой абзац。</p>
<p>Девятый абзац。</p>
<p><b>Внимание:</b> Internet Explorer 8 и более ранние версии браузеров не поддерживают селектор <nth-last-child()>.</p>
</body>
</html>Проверьте, посмотрите <‹/›