Специфичность в CSS
Click here to load reader
Transcript of Специфичность в 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. Каскадные таблицы стилей. Подробное руководство. Э.Мейер.