Создание сайтов с нуля - урок 27 - Каскадность и специфичность в CSS

Напомню, что существует 3 способа задания свойств для элементов html. Один из способов – это через подключаемую таблицу стилей, второй – при помощи тега style в блоке head html-документа, третий – через атрибут style непосредственно в открывающем теге элемента.

Кроме того, никто не запрещает к одному документу html подключать несколько файлов стилей.

В итоге, браузер находит все CSS-правила, влияющие на текущий элемент, обрабатывает их, комбинируя между собой, и получает итоговый список свойств для этого элемента. И в текущем уроке нас интересует как раз то, как браузер обрабатывает одинаковые свойства для одного элемента, заданные в разных местах.

Так вот, эта особенность или возможность применить несколько CSS-правил к одному и тому же элементу, называется каскадность. И именно поэтому таблицы стилей называются каскадными, т.е. Cascading Style Sheets.

В целом это сделано для упрощения и сокращения кода. Например, мы можем задать какие-то общие стили для всех абзацев текста, а только некоторым из них – какие-то отдельные. Если бы не работал принцип каскадности, то каждому элементу пришлось бы задавать отдельно свои собственные свойства.

Но все это хорошо и красиво до тех пор, пока все добавляемые свойства – разные и не конфликтуют между собой. А что получится, если добавить в двух разных местах одинаковое свойство, но с разными значениями?

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

Сначала будет проанализировано при помощи каких селекторов задавались свойства.

Если селекторы однотипные, то тогда более приоритетным является CSS-правило, которое расположено ниже в коде.

Если селекторы разные, то браузер применяет свойства от селектора, у которого значение специфичности селектора больше. Специфичность это некоторая условная величина, вычисляемая следующим образом:

• самым менее приоритетным, т.е. менее важным, является селектор * (звездочка), т.к. он выбирает все элементы на странице. За этот селектор начисляется 0;
• за каждый селектор тега и псевдоэлемент начисляется 1;
• за каждый класс и псевдокласс начисляется 10;
• за каждый идентификатор начисляется 100 (значение идентификатора должно быть уникальным в пределах страницы, т.е. селектор по id может выбрать только один элемент. И поэтому он на порядок специфичнее селекторов по тегам, классам, а также комбинаций этих селекторов);
• за встроенный стиль, добавляемый к тегу через атрибут style, начисляется 1000 (поэтому всегда перекрывает связанные и глобальные стили),
• применение ключевого слова !important добавляет 10000 и перекрывает все, в том числе и встроенные стили (при вёрстке рекомендуется НЕ использовать !important и стараться обходиться без него).

Если два селектора имеют одинаковую специфичность, то применяться будет тот стиль, что указан в коде ниже.