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

Специфичность в CSSКоржнев Сергей

2ГИС

● Научимся вычислять специфичность CSS-правил

● Откроем секрет о том, какое из конфликтующих CSS-правил все-таки сработает

О чем нано-доклад?

0, 0, 0, 0

● Каждый идентификатор добавляет 0, 1, 0, 0

● Каждый класс, псевдокласс(:active) или атрибут -0, 0, 1, 0

● Каждый элемент или псевдоэлемент(:first-letter) - 0, 0, 0, 1

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

h1 {color: red;} - 0, 0, 0, 1p em {color: purple;} - 0, 0, 0, 2.grape {color: purple;} - 0, 0, 1, 0*.bright {color: yellow;} - 0, 0, 1, 0p.bright em.dark {color: maroon;} - 0, 0, 2, 2div#sidebar *[href] {color: silver;} - 0, 1, 1, 1

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

h1 {color: red;} - 0, 0, 0, 1body h1 {color: red;} - 0, 0, 0, 2 - победитель

h2.grape {color: purple;} - 0, 0, 1, 1 - победительр2 {color: silver;} - 0, 0, 0, 1

html > body table tr[id="totals"] td ul > li {color: maroon;} - 0, 0, 1, 7li#answer {color: navy;} - 0, 1, 0 1

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

h1 {color: red; background: black;}

h1 {color: red;} h1 {background: black;}

Объявления и специфичность

Специфичность * - 0, 0, 0, 0 0, 0, 0, 0 != отсутствие специфичности

div p {color: black;} - 0, 0, 0, 2 (черный только p)* {color: gray} - 0, 0, 0, 0

div p === body * strong

Уникальность селектора

● h1#meadow {color: red;}0, 1, 0, 1● <h1 id="color: green;">Smth</h1>1, 0, 0, 0

Встроенные стили

h1 {color: gray important!;}

● Группируются в отдельную группу, уже в которой конфликты определяются специфичностью

● Любое важное объявление перекрывает все неважные

Важность

● Не имеет специфичности, даже нулевой● Не все свойства наследуются (например,

border, margin, padding)

Наследование

h1 {color: red;}h1 {color: blue;} - приоритетнее

<style>... - как будто в конце</style>

Очередность

Источник

● CSS. Каскадные таблицы стилей. Подробное руководство. Э.Мейер.