Специфика CSS

Краткое содержание

В этой статье вы узнаете о советах и хитростях css-специфичности, рейтинге специфичности, а также научитесь рассчитывать css-специфичность.

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

Таким образом, специфичность — это алгоритм, используемый браузерами для определения CSS-объявления, наиболее подходящего для элемента, которое, в свою очередь, определяет значение свойства, применяемого к элементу.

Давайте рассмотрим пример

.title {
        background-color: green;
      }
h1 {
     background-color: red;
   }
<h1 class="title">Hello World</h1>

В коде, написанном выше, мы имеем противоречивое объявление. Наш элемент html соответствует и классу .title, и селекторам элемента h1. Это действительно элемент h1, и он также имеет имя класса .title. У каждого селектора есть свое свойство background-color. Угадайте, какое свойство background-color будет у элемента h1?

Вы можете сказать, что он красный, потому что селектор элемента h1 идет после селектора класса .title. Вот результат

Да, он зеленый. Правило селектора класса было применено. Это происходит потому, что селекторы класса .title имеют более высокий ранг специфичности, чем селекторы элементов h1.

Таким образом, при конфликте свойств CSS в нескольких правилах выбирается правило с наиболее специфичным селектором.

Рейтинг специфичности

Рейтинг специфичности правил CSS выглядит следующим образом, от наиболее специфичного к наименее специфичному.

1. Встроенные стили — Пример: <h1 style="color: pink;">.
2. Идентификационные селекторы — Пример: #navbar.
3. Селекторы классов .myClass, селекторы атрибутов [type="radio"] и псевдоклассы :hover
4. Селекторы элементов div и псевдоэлементов :before

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

Ниже приведены значения специфичности селектора.

• Инлайн-стили имеют специфичность 10000
• Добавьте 100 для каждого совпадающего селектора ID
• Добавьте 10 для каждого совпадающего селектора класса, селекторов атрибутов и псевдоклассов.
• Добавьте 1 для каждого совпадающего селектора элемента и псевдоэлементов.

Пример

#btn {
   background-color: red; /* 100 */
}

button.btn[type="button"] {
    background-color: green; /* 1 + 10 + 10 = 21*/
}

.btn {
    background-color: blue; /* 10 */
}
<div id="container">
   <button class="btn" id="btn" type="button">Button</button>
</div>

1. Первое объявление содержит просто селектор ID со значением специфичности 100.
2. Второе объявление включает селектор элементов со значением 1, селектор классов со значением 10 и селектор атрибутов со значением 10. 10 + 10 + 1 = 21
3. Третье объявление — это просто селектор класса со значением специфичности 10.

В результате будет применено первое объявление стиля, так как первое объявление имеет наибольшее значение специфичности 100.

Примечание: Встроенные стили имеют наивысшую специфичность и всегда отменяют любые стили в авторской таблице стилей. Единственный способ переопределить встроенные стили — использовать important.

Пример

h1{
  color: black;
}
h1#title {
  color: green;
}
<h1 id="title" style="color: pink;">Heading</h1>

Будет применен встроенный стиль, поскольку он имеет наивысшее значение специфичности 1000.

!important

CSS-объявления, помеченные как важные, отменяют любое противоречащее объявление, даже если селектор менее специфичен.
Использование важности считается плохой практикой, и ее следует избегать. Это может усложнить решение проблем css и сделать вашу таблицу стилей менее удобной для обслуживания.

Лучше увеличить специфичность селектора так, чтобы он был больше других деклараций.

Правило увеличения специфичности

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

2. Если несколько конфликтующих деклараций имеют одинаковую специфичность. Побеждает последнее объявление стиля.

Заключение

В этой статье вы узнали о правиле специфичности css, о том, как рассчитать специфичность.

Как frontend-разработчик, знание специфичности очень важно, и я надеюсь, что эта статья помогла вам понять специфичность css.