Специфика CSS


Оглавление

    Показать оглавление


Что такое специфичность?

Если есть два или более правил CSS, которые указывают на одно и то же элемент, селектор с наибольшим значением специфичности «выиграет», и его объявление стиля будет применено к этому элементу HTML.

Думайте о специфичности как о балле/ранге, который определяет, какое объявление стиля в конечном итоге применяется к элементу.

Посмотрите на следующие примеры:

Пример 1

В этом примере мы использовали элемент «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:

Пример 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:

Пример 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:

Пример 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 - Универсальный селектор (*) и унаследованные значения игнорируются!