Якщо у вас є два (або більше) конфліктуючих правила CSS, що відносяться до одного і того ж елементу, то для визначення більш пріоритетного, браузери використовують певні критерії відбору.
Вникання в ці критерії відбору може здатися не таким вже й важливою справою. Та й в більшості випадків ніякі конфлікти вам не загрожують. Однак, чим об'ємніше і складніше файли стилів, або чим їх більше, тим більша ймовірність виникнення подібних конфліктів.
Якщо є кілька однакових CSS селекторів, то селектор, декларований пізніше інших, має більш високий пріоритет. Наприклад, якщо у вас є наступна декларація:
то параграф буде синього кольору, так як це правило задекларовано останнім.
Однак навмисно ви навряд чи будете декларувати однакові селектори з конфліктуючими правилами (бо в цьому немає ніякого сенсу). Проте, законна територія конфліктів - це вкладені селектори. Наприклад, візьмемо такий приклад:
Може здатися, що елементи
всередині елемента
з'являється останньої. Але насправді такі елементи будуть червоного колір відповідно до правила першого селектора. Це відбувається через те, що чим специфичнее селектор, тим більший пріоритет він має.
Реальна специфічність групи вкладених селектор визначається на підставі деяких обчислень. По суті, кожному селектору ідентифікатора ( "# ім'я") присвоюється значення 100, кожному селектору класу ( ".імя") - значення 10 і кожному HTML селектору ( "ім'я") - значення 1. Потім відбувається складання значень вкладених селектор.
- p - специфічність 1 (1 селектор імені)
- div p - специфічність 2 (2 селектора імені; 1 + 1)
- .tree - специфічність 10 (1 селектор класу)
- div p.tree - специфічність 12 (2 селектора імені і селектор класу; 1 + 1 + 10)
- #baobab - специфічність 100 (1 селектор ідентифікатора)
- body #baobab .alternative p - специфічність 112 (селектор імені, селектор ідентифікатора, селектор класу, селектор імені; 1 + 100 + 10 + 1)
Таким чином, якби всі ці селектори були б визначені, то div p.tree (зі специфічністю 12) перекрив би селектор div p (зі специфічністю 2), а селектор body #baobab .alternative p перекрив би всіх їх не залежно від порядку декларування .