Если есть два или более правил CSS, которые указывают на одно и то же элемент, селектор с наибольшим значением специфичности «выиграет», и его объявление стиля будет применено к этому элементу HTML.
Думайте о специфичности как о балле/ранге, который определяет, какое объявление стиля в конечном итоге применяется к элементу.
Посмотрите на следующие примеры:
В этом примере мы использовали элемент «p» в качестве селектора и указали красный цвет. для этого элемента. Текст будет красным:
<html>
<head>
<style>
p {color: red;}
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
Попробуйте сами →
<!DOCTYPE html>
<html>
<head>
<style>
p {color: red;}
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
Теперь посмотрим на пример 2:
В этом примере мы добавили селектор классов (с именем «test») и указал зеленый цвет для этого класса. Текст теперь будет зеленым (хотя мы указали красный цвет для селектора элемента «p»). Это потому, что селектор класса дан более высокий приоритет:
<html>
<head>
<style>
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p class="test">Hello World!</p>
</body>
</html>
Попробуйте сами →
<!DOCTYPE html>
<html>
<head>
<style>
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p class="test">Hello World!</p>
</body>
</html>
Теперь посмотрим на пример 3:
В этом примере мы добавили селектор идентификатора (с именем «demo»). Теперь текст будет синий, потому что селектору идентификатора присвоен более высокий приоритет:
<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>
Попробуйте сами →
<!DOCTYPE html>
<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:
В этом примере мы добавили встроенный стиль для элемента «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>
Попробуйте сами →
<!DOCTYPE html>
<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 имеет свое место в иерархии специфичности.
Существует четыре категории, определяющие уровень специфичности селектора:
1. Встроенные стили. Пример:
<h1 style="color: pink;">
2. Идентификаторы - пример:
#navbar
3. Классы, псевдоклассы, селекторы атрибутов. Пример:
.test, :hover, [href]
4. Элементы и псевдоэлементы. Пример:
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 (встроенный стиль)
Поскольку третье правило (С) имеет наибольшее значение специфичности (1000), этот стиль декларация будет применена.
Равная специфичность: побеждает последнее правило - Если одно и то же правило дважды записано во внешнюю таблицу стилей, то последнее правило побеждает:
h1 {background-color: yellow;}
h1 {background-color: red;}
Попробуйте сами →
<!DOCTYPE html>
<html>
<head>
<style>
h1 {background-color: yellow;}
h1 {background-color: red;}
</style>
</head>
<body>
<h1>This is heading 1</h1>
</body>
</html>
Селекторы идентификаторов имеют более высокую специфичность, чем селекторы атрибутов - Посмотрите на следующие три строки кода:
div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}
Попробуйте сами →
<!DOCTYPE html>
<html>
<head>
<style>
div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}
</style>
</head>
<body>
<div id="a">This is a div</div>
</body>
</html>
первое правило более конкретное, чем два других, и поэтому будет применяться.
Контекстные селекторы более конкретны, чем отдельный элемент селектор — Встроенная таблица стилей находится ближе к элементу, которому нужно стилизовать. Итак, в следующая ситуация
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;}
Попробуйте сами →
<!DOCTYPE html>
<html>
<head>
<style>
.intro {background-color: yellow;}
h1 {background-color: red;}
</style>
</head>
<body>
<h1 class="intro">This is a heading</h1>
</body>
</html>
Универсальный селектор (*) и унаследованные значения имеют специфичность 0 - Универсальный селектор (*) и унаследованные значения игнорируются!