Специфика CSS
Что такое специфичность?
Если есть два или более правила CSS, которые указывают на один и тот же элемент, селектор с наивысшим значением специфичности «выиграет», и его объявление стиля будет применено к этому элементу HTML.
Думайте о специфичности как о балле/ранге, определяющем, какое объявление стиля в конечном итоге применяется к элементу.
Посмотрите на следующие примеры:
Пример 1
В этом примере мы использовали элемент «p» в качестве селектора и указали для этого элемента красный цвет. Текст будет красным:
<html>
<head>
<style>
p {color: red;}
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
Теперь посмотрите на пример 2:
Пример 2
В этом примере мы добавили селектор класса (с именем «тест») и указали для этого класса зеленый цвет. Текст теперь будет зеленым (несмотря на то, что мы указали красный цвет для селектора элемента «p». Это связано с тем, что селектор класса имеет более высокий приоритет:
<html>
<head>
<style>
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p class="test">Hello World!</p>
</body>
</html>
Теперь посмотрите на пример 3:
Пример 3
В этом примере мы добавили селектор идентификатора (названный «демо»). Текст теперь будет синим, потому что селектор id имеет более высокий приоритет:
<html>
<head>
<style>
#demo {color: blue;}
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p id="demo" class="test">Hello
World!</p>
</body>
</html>
Теперь посмотрите на пример 4:
Пример 4
В этом примере мы добавили встроенный стиль для элемента «p». Текст теперь будет розовым, потому что встроенный стиль имеет наивысший приоритет:
<html>
<head>
<style>
#demo {color: blue;}
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p id="demo" class="test"
style="color: pink;">Hello World!</p>
</body>
</html>
Иерархия специфики
У каждого селектора CSS есть свое место в иерархии специфичности.
Существует четыре категории, которые определяют уровень специфичности селектора:
- Встроенные стили — пример: <h1 style="color: pink;">
- Идентификаторы — пример: #navbar
- Классы, псевдоклассы, селекторы атрибутов — пример: .test, :hover, [href]
- Элементы и псевдоэлементы — Пример: h1, :before
Как рассчитать специфичность?
Запомните, как рассчитать специфичность!
Начните с 0, добавьте 100 для каждого значения идентификатора, добавьте 10 для каждого значения класса (или псевдокласса или селектора атрибута), добавьте 1 для каждого селектора элемента или псевдоэлемента.
Примечание. Встроенный стиль получает значение специфичности 1000 и всегда имеет наивысший приоритет!
Примечание 2. Из этого правила есть одно исключение: если вы используете !important
правило, оно даже переопределит встроенные стили!
В таблице ниже приведены некоторые примеры расчета значений специфичности:
| Selector | Specificity Value | Calculation |
|---|---|---|
| p | 1 | 1 |
| p.test | 11 | 1 + 10 |
| p#demo | 101 | 1 + 100 |
| <p style="color: pink;"> | 1000 | 1000 |
| #demo | 100 | 100 |
| .test | 10 | 10 |
| p.test1.test2 | 21 | 1 + 10 + 10 |
| #navbar p#demo | 201 | 100 + 1 + 100 |
| * | 0 | 0 (the universal selector is ignored) |
Селектор с наивысшим значением специфичности выиграет и вступит в силу!
Рассмотрим эти три фрагмента кода:
Пример
A: h1
B: h1#content
C: <h1 id="content" style="color:
pink;">Heading</h1>
Специфичность A равна 1 (один селектор элемента)
Специфичность B равна 101 (одна ссылка на идентификатор + один селектор элемента)
Специфичность C равна 1000 (встроенный стиль)
Поскольку третье правило (C) имеет наивысшее значение специфичности (1000), будет применено это объявление стиля.
Дополнительные примеры правил специфичности
Равная специфичность: побеждает последнее правило. Если одно и то же правило дважды записано во внешнюю таблицу стилей, то побеждает последнее правило:
Пример
h1 {background-color: yellow;}
h1 {background-color: red;}
Селекторы идентификаторов имеют более высокую специфичность, чем селекторы атрибутов . Посмотрите на следующие три строки кода:
Пример
div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}
первое правило является более конкретным, чем два других, и поэтому будет применяться.
Контекстные селекторы более специфичны, чем селектор одного элемента . Встроенная таблица стилей ближе к элементу, для которого нужно применить стиль. Итак, в следующей ситуации
Пример
From external CSS file:
#content h1 {background-color: red;}
In HTML file:
<style>
#content h1 {background-color:
yellow;}
</style>
применяется последнее правило.
Селектор класса превосходит любое количество селекторов элементов — селектор класса, такой как .intro, превосходит h1, p, div и т. д.:
Пример
.intro {background-color: yellow;}
h1 {background-color:
red;}
Универсальный селектор (*) и унаследованные значения имеют специфичность 0 — универсальный селектор (*) и унаследованные значения игнорируются!