Определение специфичности селекторов

Специфичность селектора вычисляется следующим образом:

  • 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» со своими атрибутами заменит правило, указанное в каскадной таблице стилей, поскольку она имеет более высокую специфичность.

Рекомендуем прочесть  Декларация !important в CSS

Подробнее можно прочесть здесь:

Calculating a selector’s specificity — //www.w3.org/TR/CSS2/cascade.html#specificity
Понравилась статья? Поделиться с друзьями:
Перейти к верхней панели