Специфичность селектора вычисляется следующим образом:
- count 1 if the declaration is from is a ‘style’ attribute rather than a rule with a selector, 0 otherwise (= a) (In HTML, values of an element’s «style» attribute are style sheet rules. These rules have no selectors, so a=1, b=0, c=0, and d=0.)
- надо подсчитать количество атрибутов id в селекторе (= b)
- надо подсчитать количество других атрибутов и псевдо-классов в селекторе (= c)
- надо подсчитать количество имен элементов (названий тегов) и псевдо-элементов в селекторе (= d)
The specificity is based only on the form of the selector. In particular, a selector of the form «[id=p33]» is counted as an attribute selector (a=0, b=0, c=1, d=0), even if the id attribute is defined as an «ID» in the source document’s DTD.
Сложение четырех чисел a-b-c-d (в системе счисления с большим основанием) дает свою специфику.
Например:
* {} /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
li {} /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
li:first-line {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul li {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul ol+li {} /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
ul ol li.red {} /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
li.red.level {} /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
#x34y {} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
style="" /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */
<head>
<style type="text/css">#warning { color: red }</style>
</head>
<body>
<p id=warning style="color: green">
</body>В вышеприведенном примере, цвет элемента <p> будет зеленым. Декларация «style» со своими атрибутами заменит правило, указанное в каскадной таблице стилей, поскольку она имеет более высокую специфичность.
Подробнее можно прочесть здесь:
Calculating a selector’s specificity — //www.w3.org/TR/CSS2/cascade.html#specificity