Приоритет правил CSS-селекторов
CSS, как и HTML, читается веб-браузерами сверху вниз и слева направо. Соответственно, если на один и тот же HTML-элемент воздействует два одинаковых по приоритету правила (свойства), то будет применено то, которое стоит в коде ниже (т.е. в потоке исполняется позже или последним).
Кроме этого, приоритет какого-либо правила по сравнению с другими правилами, применяемыми к одному и тому же элементу, определяется исходя из специфичности правила. Например, к элементу
|
1 |
<h3 class="vas" id="ret">Заголовок</h3> |
могут быть применены следующие правила:
h3{color:gray}h3.vas{color:red}h3#ret{color:green}h3,h2,h1{color:blue}
Правило h3{color:gray} относится только к заголовкам третьего уровня. Правило h3.vas{color:red} применяется только к элементам h3, принадлежащим к классу vas, то есть является более специфичным по сравнению с предыдущим правилом. Самым специфичным является правило h3#ret{color:green}, которое применяется к конкретному элементу h3 с ID ret.
Все эти правила могут быть применены к элементу
<h3 class="vas" id="ret">Заголовок</h3>. Но если все они заданы вместе для одного элемента, то приоритет будет иметь самое специфичное правило h3#ret{color:green}, независимо от того, в каком порядке эти правила заданы. Оно и будет применено к элементу
<h3 class="vas" id="ret">Заголовок</h3>
Специфичность правил
К HTML-элементам применяются правила, обладающие наибольшей специфичностью, независимо от порядка задания. Специфичность правила определяется по следующей схеме:
- подсчитывается число атрибутов id в данном правиле (число а);
- подсчитывается число других атрибутов и псевдоклассов в данном правиле (число b);
- подсчитывается число названий HTML-элементoв в данном правиле (число с);
Псевдоэлементы и псевдоклассы считаются как обычные элементы и классы.
Далее, из чисел a, b и с составляется число abc, которое и показывает специфичность правила. Например:
| Элементы | abc | Специфичность |
|---|---|---|
* {.....} |
а=0, b=0, с=0 | 0 |
h3 {.....} |
a=0, b=0, c=1 | 1 |
h3, h2 {.....} |
a=0, b=0, c=2 | 2 |
h3, p + ul {.....} |
a=0, b=0, c=3 | 3 |
h3.var {.....} |
a=0, b=1, c=1 | 11 |
h3.var, pre {.....} |
a=0, b=1, c=2 | 12 |
h3.var, .yty {.....} |
a=0, b=2, c=1 | 21 |
h3#ret {.....} |
a=1, b=0, c=1 | 101 |
p#kil, ul li, *.tgt {.....} |
a=1, b=1, c=3 | 113 |
О приоритетах, веса правил
tagname — 1 (имя тега типа «body», «p», «h», «a», «ul», «li»)
class — 10
id — 1000
инстайл (то есть когда правило записано внутри тега) — 1000
Пример
|
1 2 3 |
p.class{} = (p)1+(.class)10=11 .class .class2 = 10+10=20 #id .class p.newclass = 100(#id)+10(.class)+1(.p)+10(.newclass)=121 |