♛ FORTRESS-DESIGN

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

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

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

Перейти к верхней панели