Специфичность селекторов идентификаторов и атрибутов

Важно отметить разницу в специфичности селектора идентификатора (ID selector) и селектора атрибутов (attribute selector), в котором указан атрибут id. Возвращаясь к третьей паре правил в примере кода, мы находим:

html > body table tr[id="totals"] td ul > li {color: maroon;} /* 0,0,1,7 */
li#answer {color: navy;} /* 0,1,0,1 (победитель) */

К общей специфичности селектор идентификатора (#answer) из второго правила добавляет 0,1,0,0. В то же время в первом правиле селектор атрибута ([id="totals"]) добавляет к значению специфичности 0,0,1,0. Таким образом, приведенные ниже правила определяют, что цвет элемента, значение атрибута id которого равно meadow, будет зеленым:

#meadow {color: green;} /* 0,1,0,0 */
*[id="meadow"] {color: red;} /* 0,0,1,0 */

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Важность
Каскад
Наследование
Объявления и специфичность
Сортировка по порядку расположения

Вернуться в раздел: CSS / 3. Структура и каскад