Приоритет правил CSS-селекторов

CSS, как и HTML, читается веб-браузерами сверху вниз и слева направо. Соответственно, если на один и тот же HTML-элемент воздействует два одинаковых по приоритету правила (свойства), то будет применено то, которое стоит в коде ниже (т.е. в потоке исполняется позже или последним).

Кроме этого, приоритет какого-либо правила по сравнению с другими правилами, применяемыми к одному и тому же элементу, определяется исходя из специфичности правила. Например, к элементу

могут быть применены следующие правила:

  • 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

Пример

У какого правила сумма больше — то приоритетней. Сумма одинаковая — исполняется правило, записанное последним.

Оставить комментарий