Що означає термін «специфічність» у CSS?
Специфічність у CSS, це система «ваг», за якою браузер визначає, яке правило важливіше, якщо два або більше правил збігаються і намагаються змінити одну й ту саму властивість одного й того самого елемента.
Простіше кажучи: специфічність, це точність селектора. Чим точніше правило вказує на елемент, тим вищий пріоритет має це правило.
Як рахується специфічність (за рівнями)
Від більшої ваги до меншої:
- ID-селектори (
#header) - Класи, атрибути, псевдокласи (
.block,[type="text"],:hover) - Тегові селектори і псевдоелементи (
div,p,::before)
Inline-стилі формально стоять ще вище за всі селектори, але зазвичай не входять до розрахунку специфічності. А !important перебуває взагалі поза цією системою і перебиває все.
Приклад порівняння
p { color: blue; } /* тег, низька вага */
.text { color: green; } /* клас, вища */
#main { color: red; } /* id, найвища */Підсумковий колір буде red, якщо всі селектори застосовуються до одного й того самого елемента.
Коли специфічність вирішує результат
Якщо два правила рівні за рівнем, тоді вступає в дію порядок у коді, перемагає написане останнім.
Підсумок
Специфічність, це механізм пріоритету CSS-селекторів. Він потрібен, щоб браузер міг однозначно вирішити, яке правило застосувати, коли є кілька варіантів.
Коротка відповідь
Для співбесідиКоротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.