Часто при верстке бывают ситуации, когда надо знать какое именно CSS правило имеет больший приоритет нежели другое. Такое часто бывает, когда надо написать правило, которое бы перебило уже написанное.
Итак, что нужно знать: приоритет правил определяет так называемое специфичность. Ее можно определить четырьмя цифрами. Например 0.0.1.3. Как их определить? Очень просто.
- Каждое название элемента имеет вес 0.0.0.1
- Каждый класс, псевдо-класс, аттрибут имеет вес 0.0.1.0
- Каждый id имеет вес 0.1.0.0
- Правило, написанное непосредственно в коде элемента имеет вес 1.0.0.0
Приведем несколько примеров:
div ul ul li - 0.0.0.4 Четыре элемента
div.aside ul li - 0.0.1.3 Один класс и три элемента
a:hover - 0.0.1.1 Один элемент и один псевдо-класс
div.navlinks a:hover - 0.0.2.2 Класс, псевдо-класс и два элемента
#title em - 0.1.0.1 Идентификатор и элемент
h1#title em Идентификатор и два элемента
Единичка в идентификаторе имеет больший вес, чем 100 в классах или элементах. Если числа на одном уровне равны, то переходим на уровень ниже и там определяем, какое из правил применить. Если все числа на всех уровнях равны, то действует то правило, которые написано позднее.
Теперь про !important. Это слово означает, что специфичность перестает действовать на данное правило. Оно будет применено в любом случае. Более интересный момент когда два правила помечены этим ключевым словом. Тогда специфичность опять начинает иметь значение.
В общем это все что надо знать о приоритете правил CSS. Надеюсь материал был для вас полезен.