Приорітети стилів CSS

1 (вищий) - inline

2 - ID

3 - classes, attributes, pseudo-classes

4 (нижчий) - pseudo-elements

Для кожного CSS-правила браузер обчислює специфічність (вагу) селектора. Значення специфічності складається з чотирьох рангів. Їхня важливість зростає справа наліво, тобто 1 у лівій колонці — це та сама 1000 балів, а 1 у правій — залишається одиницею. Кожен селектор відповідного класу (4й - пседоелемент, 3 - класс і т.д.) додає одиницю ваги у своє місце приорітету. З таких цифр і вийде ітогова вага приорітета щоб система зьясувала - х якого джерела стилів має найвищий приорітет. Якщо для одного отримувача стилів описано декілька стилів і деякі з них не спіадають (наприклад вв одному бекграунд а у іньшому - розмір шрифта) - то такі властивочті обїеднуються.

Приклад - Колір тексту посилання буде коричневим, тому що специфічність п'ятого правила вища.

/* Специфічність - 0 0 0 1 */
a {
color: green;
}
/* Специфічність - 0 0 1 0 */
.post-link {
color: orange;
}
/* Специфічність - 0 0 1 1 */
a.post-link {
color: blue;
}
/* Специфічність - 0 0 2 0 */
.post > .post-link {
color: red;
}
/* ✅ Специфічність - 0 0 2 1 */
.post > a.post-link {
color: brown;
}

Якщо специфічність однакова, перемагає правило, розташоване нижче в CSS-коді, тобто останнє по порядку з конфліктуючих.

/* Три селектори елемента з однаковою специфічністю */
a {
color: teal;
}
a {
color: brown;
}
/* Це правило стоїть нижче, отже до всіх посилань застосовується помаранчевий колір тексту */
a {
color: orange;
}