Как работает специфичность CSS-селекторов и как это влияет на стилизацию элементов?
Специфичность CSS-селекторов (или вес селектора) — это механизм, который позволяет браузеру определить, какое правило CSS более приоритетное, когда к одному элементу применяются несколько правил. 1
Специфичность рассчитывается на основе четырёх компонентов: 1
- Селекторы тегов и псевдоэлементы (например, div, p, ::before) — 1 балл за каждый. 1
- Селекторы классов, атрибутов и псевдоклассы (например, .class, [type='text'], :hover) — 10 баллов за каждый. 1
- Селекторы идентификаторов (например, #id) — 100 баллов за каждый. 1
- Встроенные стили (например, style='…') — 1000 баллов за каждый. 1
Когда браузер сталкивается с несколькими правилами, применимыми к одному элементу, он использует специфичность для определения приоритета каждого правила. 1 Чем выше специфичность, тем выше приоритет. 1
Влияние специфичности на стилизацию элементов заключается в том, что разработчики могут создавать более точную и управляемую вёрстку, избегая конфликтов стилей и неожиданного поведения элементов. 1
Например, если к одному элементу применяются стили с разным весом, в результате CSS отобразит стиль с наибольшим весом. 5 Если к одному элементу применяются несколько стилей с одинаковым весом, в итоге CSS отобразит тот стиль, который идёт последним (то есть находится ближе к концу таблицы стилей). 5
