Иерархия специфичности в CSS

Иерархия специфичности

Селекторы имеют разный «вес», и каждый тип селектора CSS занимает своё место в иерархии специфичности. От самого сильного к самому слабому:

Встроенные стили — наивысший приоритет, переопределяют все остальные селекторы.
Селекторы ID (напр. #navbar) — следующие по приоритету, с весом 1-0-0.
Классы, селекторы атрибутов и псевдоклассы (напр. .test, [type="text"], :hover) — третьи по приоритету, с весом 0-1-0.
Селекторы элементов и псевдоэлементы (напр. <h1>, ::before, ::after) — низкий приоритет, с весом 0-0-1.
Универсальный селектор (*) и :where() — без приоритета, с весом 0-0-0.

Понимание нотации веса

Вес записывается тремя числами (X-Y-Z), и каждое из них считает группу селекторов:

X — селекторы ID.
Y — селекторы классов, селекторы атрибутов и псевдоклассы.
Z — селекторы элементов и псевдоэлементы.

Сравнение начинается слева, поэтому более высокое крайнее левое число сразу побеждает. При равенстве решает следующее число, и так далее.

Вычисление веса специфичности

Элемент получает декларацию CSS с наивысшим весом специфичности.

Пример

Здесь несколько селекторов с разным весом нацелены на один и тот же абзац, что показывает, как работает иерархия специфичности. С весом 1-0-1, самым высоким из них, побеждает p#demo.

Создайте страницу, демонстрирующую веса иерархии специфичности CSS. Определите несколько правил CSS, применяемых к одному и тому же абзацу: селектор ID (#demo), составной селектор (p#demo), селектор класса (.test), составной селектор класса (p.test) и селектор элемента (p). У абзаца должны быть id="demo" и class="test", и он должен отображать "Hello World!" цветом правила с наивысшей специфичностью (оранжевый, из p#demo с весом 1-0-1). Добавьте комментарии CSS, показывающие вес каждого правила.

> Результат: полная HTML-страница

Prompt

Создайте страницу, демонстрирующую веса иерархии специфичности CSS. Определите несколько правил CSS, применяемых к одному и тому же абзацу: селектор ID (#demo), составной селектор (p#demo), селектор класса (.test), составной селектор класса (p.test) и селектор элемента (p). У абзаца должны быть id="demo" и class="test", и он должен отображать "Hello World!" цветом правила с наивысшей специфичностью (оранжевый, из p#demo с весом 1-0-1). Добавьте комментарии CSS, показывающие вес каждого правила.

Результат: полная HTML-страница

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Specificity Weight</title>
<style>
#demo {color: blue;} /* weight: 1-0-0 */
p#demo {color: orange;} /* weight: 1-0-1 WINS! */
.test {color: green;} /* weight: 0-1-0 */
p.test {color: green;} /* weight: 0-1-1 */
p {color: red;} /* weight: 0-0-1 */
</style>
</head>
<body>

<p id="demo" class="test">Hello World!</p>

</body>
</html>

Больше примеров специфичности

Сценарии ниже показывают, как ведёт себя специфичность в нескольких других ситуациях, чтобы вы лучше её усвоили.

Равная специфичность: побеждает последнее правило

Когда правило встречается в таблице стилей дважды, побеждает то, что записано последним.

Создайте страницу, показывающую, что при равной специфичности двух правил CSS побеждает последнее правило. Определите два правила h1: первое задаёт background-color жёлтым, а второе — красным. Отобразите заголовок h1, чтобы показать, что побеждает красный фон.

> Результат: полная HTML-страница

Prompt

Создайте страницу, показывающую, что при равной специфичности двух правил CSS побеждает последнее правило. Определите два правила h1: первое задаёт background-color жёлтым, а второе — красным. Отобразите заголовок h1, чтобы показать, что побеждает красный фон.

Результат: полная HTML-страница

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Equal Specificity</title>
<style>
h1 {background-color: yellow;}
h1 {background-color: red;}
</style>
</head>
<body>

<h1>Hello World!</h1>

</body>
</html>

Селекторы ID побеждают селекторы атрибутов

Даже когда селектор атрибута нацелен на ID элемента, селектор ID превосходит его по специфичности, поэтому применяется правило селектора ID.

Создайте страницу, демонстрирующую, что селектор ID имеет более высокую специфичность, чем селектор атрибута. Используйте #myDiv с background-color жёлтым и div[id=myDiv] с background-color синим. Отобразите элемент div с id="myDiv", чтобы доказать, что селектор ID побеждает (жёлтый фон).

> Результат: полная HTML-страница

Prompt

Создайте страницу, демонстрирующую, что селектор ID имеет более высокую специфичность, чем селектор атрибута. Используйте #myDiv с background-color жёлтым и div[id=myDiv] с background-color синим. Отобразите элемент div с id="myDiv", чтобы доказать, что селектор ID побеждает (жёлтый фон).

Результат: полная HTML-страница

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ID Selector vs Attribute Selector</title>
<style>
#myDiv {background-color: yellow;}
div[id=myDiv] {background-color: blue;}
</style>
</head>
<body>

<div id="myDiv">This div has id="myDiv".</div>

</body>
</html>

Селектор класса побеждает селекторы элементов

Селекторы элементов, такие как <h1>, <p> и <div>, проигрывают селектору класса, например .intro.

Создайте страницу, показывающую, что селектор класса побеждает селектор элемента. Определите .intro с background-color жёлтым и h1 с background-color красным. Отобразите элемент h1 с class="intro", чтобы показать, что селектор класса побеждает (жёлтый фон).

> Результат: полная HTML-страница

Prompt

Создайте страницу, показывающую, что селектор класса побеждает селектор элемента. Определите .intro с background-color жёлтым и h1 с background-color красным. Отобразите элемент h1 с class="intro", чтобы показать, что селектор класса побеждает (жёлтый фон).

Результат: полная HTML-страница

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Class Selector vs Element Selector</title>
<style>
.intro {background-color: yellow;}
h1 {background-color: red;}
</style>
</head>
<body>

<h1 class="intro">Hello World!</h1>

</body>
</html>

Универсальный селектор (*)

Поскольку универсальный селектор (*) не имеет значения веса специфичности, любой другой селектор его переопределяет.

Создайте страницу, демонстрирующую, что универсальный селектор (*) не имеет веса специфичности. Определите * с background-color жёлтым и h1 с background-color красным. Отобразите заголовок h1, чтобы показать, что селектор элемента побеждает универсальный селектор (красный фон).

> Результат: полная HTML-страница

Prompt

Создайте страницу, демонстрирующую, что универсальный селектор (*) не имеет веса специфичности. Определите * с background-color жёлтым и h1 с background-color красным. Отобразите заголовок h1, чтобы показать, что селектор элемента побеждает универсальный селектор (красный фон).

Результат: полная HTML-страница

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Universal Selector Specificity</title>
<style>
* {background-color: yellow;}
h1 {background-color: red;}
</style>
</head>
<body>

<h1>Hello World!</h1>

</body>
</html>

Встроенный стиль против внешней таблицы стилей

При одинаковой специфичности встроенная таблица стилей побеждает внешнюю, когда находится ближе к элементу, поскольку указана позже.

/*From external CSS file:*/
#content h1 {background-color: red;}

/*In HTML file:*/
<style>
#content h1 {background-color: yellow;}
</style>