Специфичность и приоритет селектора CSS

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

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

1. !important и переопределение встроенных стилей:

   • Стили, объявленные с флагом !important или встроенные с использованием атрибута style, имеют наивысший приоритет.

2. Специфика:

   • Специфичность селектора определяется количеством и типом его компонентов:

     • #id имеет более высокую специфичность, чем .classname
     • .classname имеет более высокую специфичность, чем tagname

3. Последнее правило имеет приоритет:

   • Если два селектора имеют одинаковую специфичность, приоритет имеет тот, который объявлен последним в файле CSS.

Пример:

Учитывайте следующие правила CSS:

body { font-size: 14px; }
#header { font-size: 16px; }

Для элемента

внутри применяются оба правила. Однако, поскольку селектор #header имеет более высокую специфичность (#id > tagname), его значение размера шрифта, равное 16 пикселей, будет применено к элементу

.

Примечание:

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