Специфичность

Специфичность селектора определяется компонентами самого селек
тора. Значение специфичности состоит из четырех частей: 0,0,0,0. Ре
альная специфичность селектора определяется следующим образом:

1) Для каждого указанного в селекторе значения идентификатора
к специфичности добавляется 0,1,0,0.
2) Для каждого указанного в селекторе имени класса, псевдокласса
или атрибута к специфичности добавляется 0,0,1,0.
3) Для каждого заданного в селекторе элемента и псевдоэлемента
к специфичности добавляется 0,0,0,1. Внутреннее противоречие
CSS2 состояло в том, что не было определено, обладают ли псевдо
элементы какой либо специфичностью, но в CSS2.1 их специфич
ность явно определена и учитывается данным правилом.
4) Комбинаторы и универсальный селектор не учитываются (более
подробно об этих значениях позже).

Таким образом, вычисляя специфичность следующих селекторов пра
вил, получаем:
h1 {color: red;} /* специфичность = 0,0,0,1 */
p em {color: purple;} /* специфичность = 0,0,0,2 */
.grape {color: purple;} /* специфичность = 0,0,1,0 */
*.bright {color: yellow;} /* специфичность = 0,0,1,0 */
p.bright em.dark {color: maroon;} /* специфичность = 0,0,2,2 */
#id216 {color: blue;} /* специфичность = 0,1,0,0 */
div#sidebar *[href] {color: silver;} /* специфичность = 0,1,1,1 */