English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
:nth-last-of-type(an+b) этот CSS-дополнение соответствует элементам, у которых после него есть an+b-1 элементов того же типа, где n - положительное или нулевое значение. Оно по сути такое же, как :nth-of-type, только оно отсчитывает в обратном порядке от конца, а не от начала.
Полное руководство по CSS-селекторам
Цвет фона для последнего второго span-элемента:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Базовый курс (oldtoolbag.com)</title>
<style>
span:nth-last-of-type(2) {
background-color: lime;
}
</style>
</head>
<body>
<div>
<span>Это тег.</span>
<span>Это другой диапазон.</span>
<em>Усилить.</em>
<span>О, этот диапазон стал размытым!</span>
<strike>Это было удалено.</strike>
<span>Это последний тег.</span>
</div>
</body>
</html>Проверьте, что ‹/›:nth-last-of-type( <nth> ) где <nth> = <an-plus-b> | even | odd
:nth-last-of-type(n) Выборщик соответствует последнему n-му элементу своего типа среди сестринских элементов.
n Это может быть цифра, ключевое слово или формула.
Подсказка:Пожалуйста, смотрите::nth-last-child()Выборщик. Этот выборщик соответствует последнему n-му структурному подэлементу в родительском элементе
Числа в таблице представляют собой версии первых браузеров, поддерживающих этот свойство.
| Выборщик | |||||
|---|---|---|---|---|---|
| :nth-last-of-type() | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
Четные и нечетные числа могут использоваться в качестве ключевых слов для соответствия подэлементам, индексы которых являются четными или нечетными.
Здесь мы установили два разных цвета фона для элементов p с обратным порядком, являющимися четными и нечетными:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Базовый курс (oldtoolbag.com)</title>
<style>
p:nth-last-of-type(odd)
{
background:#ff0000;
}
p:nth-last-of-type(even)
{
background:#0000ff;
}
</style>
</head>
<body>
<div>
<p>Это первый абзац。</p>
<p>Это второй абзац。</p>
<p>Это третий абзац。</p>
<p>Это четвертый абзац。</p>
</div>
</body>
</html>Проверьте, что ‹/›Используя формулу (an+ b). Описание: a represents the size of a cycle, N is a counter (starting from 0), and b is the offset.
Здесь мы установили цвет фона для всех элементов p с индексом, являющимся кратным 3, в обратном порядке:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Базовый курс (oldtoolbag.com)</title>
<style>
p:nth-last-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 и более ранние версии браузеров не поддерживают selector <nth-last-child()>.</p>
</body>
</html>Проверьте, что ‹/›