English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
:nth-child(an+b) этот CSS-псевдо-класс сначала находит всех братьев текущего элемента, затем сортирует их по порядку следования и выбирает элементы, соответствующие выражению (an+b) в скобках nth-child, то есть集合у элементов, соответствующих этому выражению (n=0, 1, 2, 3...). Пример:
0n+3 или просто 3 соответствует третьему элементу.
1n+0 или просто n соответствует каждому элементу. (Совместимость: в версиях браузера Android 4.3 и ниже n и 1n работают по-разному. 1n и 1n+0 работают одинаково, и вы можете выбирать по своему усмотрению.)
2n+0 или просто 2n соответствует элементам, расположенным в позициях 2, 4, 6, 8... (при n=0, 2n+0=0, первый элемент не существует, так как отсчёт начинается с 1). Вы можете использовать ключевое слово even для замены этого выражения.
2n+1 соответствует элементам, расположенным в позициях 1, 3, 5, 7... Вы можете использовать ключевое слово odd для замены этого выражения.
3n+4 соответствует элементам, расположенным в позициях 4, 7, 10, 13...
a и b должны быть целыми числами, и индекс первого подэлемента элемента составляет 1. Иначе говоря, этот псевдо-класс соответствует всем подэлементам, индексы которых принадлежат集合у {an + b; n = 0, 1, 2, ...}. Также необходимо特别注意, что an должен быть написан перед b, и не может быть написан в виде b+an.
Полное руководство по CSS-селекторам
Определите цвет фона для второго подэлемента в родительском элементе, который соответствует элементу p:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Основное руководство (oldtoolbag.com)</title>
<style>
p:nth-child(2)
{
background:orange;
}
</style>
</head>
<body>
background:#0000ff;
<h1>Это заголовок</h1>
<p>Это первый абзац.</p>
<p>Это второй абзац.</p>
<p>Это третий абзац.</p>
<p><b>Внимание:</b> браузеры Internet Explorer 8 и более ранние версии не поддерживают селектор :nth-child().</p>
</body>
</html>Проверьте, как это работает ‹/›Селектор :nth-child(n) соответствует n-му подэлементу родительского элемента, тип элемента не ограничивается.
n Это может быть цифра, ключевое слово или формула.
Совет: См. такжеВыборщик. Этот селектор соответствует n-му同级 брату в одном типе.
tr:nth-child(2n+1)
Это означает, что выбраны нечётные строки HTML таблицы.
tr:nth-child(odd)
Это означает, что выбраны нечётные строки HTML таблицы.
tr:nth-child(2n)
Это означает, что выбраны чётные строки HTML таблицы.
tr:nth-child(even)
Это означает, что выбраны чётные строки HTML таблицы.
span:nth-child(0n+1)
Это означает, что выбранный элемент является первым подэлементом и его типом является span, что аналогично селектору :first-child.
span:nth-child(1)
Это означает, что выбрана тег span, который является первым подэлементом родительского элемента.
span:nth-child(-n+3)
Соответствует span элементу из первых трёх подэлементов.
Числа в таблице представляют собой версии первого браузера, поддерживающего этот свойство.
| Выборщик | |||||
|---|---|---|---|---|---|
| :nth-child() | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
Числа в таблице представляют собой версии первого браузера, поддерживающего этот свойство. Числа в таблице представляют собой версии первого браузера, поддерживающего этот свойство.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Основное руководство (oldtoolbag.com)</title>
<style>
Здесь мы задаем два разных цвета фона для элементов p с индексом, являющимся奇ным или даже:
{
p:nth-child(odd)
}
background:#ff0000;
{
p:nth-child(even)
}
</style>
</head>
<body>
background:#0000ff;
<h1>Это заголовок</h1>
<p>Это первый абзац.</p>
<p>Это второй абзац.</p>
<p>Это третий абзац.</p>
<p><b>Внимание:</b> браузеры Internet Explorer 8 и более ранние версии не поддерживают селектор :nth-child().</p>
</body>
</html>Проверьте, как это работает ‹/›Пример 2 Здесь мы задаем цвет фона для всех элементов p с индексом, являющимся кратным 3:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Основное руководство (oldtoolbag.com)</title>
<style>
p:nth-child(3n+0)
{
background:orange;
}
</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-child().</p>
</body>
</html>Проверьте, как это работает ‹/›