Основы CSS - веса правил

Тут поговорим о приоритетах CSS правил на верхнем уровне не углубляясь в селекторы. Что если в атрибутах тега описано одно поведение, а в стилях другое. Что за флаг !important и как с ним бороться.

Порядок чтения

Рассмотрим эту систему на примерах. Начиная с самого простого:

1
2

a { color: red } 
a { color: blue }

Попробуйте предположить какого цвета в этом случае будут ссылки? Красного или синего, тут можно придумать несколько теорий. Первая браузер читает правила снизу-вверх справа налево, встречая первое совпадение сразу начинает рисовать для элемента. В этом случае ссылки должны покрасится в синий цвет.

Если бы утверждение " сразу начинает рисовать " было бы верным это бы значительно ускорило работу браузера, но поставило бы крест на переопределениях стилей. По этому это утверждение не верно, браузер будет знать о всех правилах для тегов “a”.

Теперь рассмотрим следующее утверждение, что было бы если браузер читал " снизу-вверх справа налево " тогда ссылки должны были бы окрасится в красный цвет, так как красный по этой логике будет последним самым приоритетным правилом. Но поскольку эти правила придумывали европейцы им было привычно читать тексты сверху вниз слева направо. Поэтому это утверждение тоже не верно.

Браузер читает стили так же как и мы книги - сверху вниз справа налево и самая актуальная информация находиться в правом нижнем углу. Тоже верно и на уровне правил . Ссылки будут окрашены в синий цвет убедиться в этом можно в песочнице .

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

Стили для отдельных html элементов можно можно вставлять в атрибут style, как это было описано в статье про вставку . Эти правила пишут без селектров, поэтому они имеют особый очень большой вес, который больше чем вес любого селектора. Так например в разметке вида:

1
2
3
4
5
6
7

<style>
  span {
    color: red;
  }
</style>
<span id="a">1</span>
<span id="b" style="color: blue">2</span>

В этом примере видна конкуренция 2х правил. С одной стороны есть селектор span, который говорит что цвет текста должен быть красный, а с другой - есть тег span с id “b” у которого есть атрибут style устанавливающий цвет текста синим. Поскольку у стилей из атрибутов нет селектора браузеры ставят такие правила выше по приоритету и span id “b” будет окрашен в синий цвет, span c id “a” будет окрашен в синий в соответствии со стилем с селектором. Но тут есть одно исключение.

!important{#!important}

Можно управлять весом на уровне правил не смотря на веса селекторов, которые рассмотрим далее. Для CSS правил существует возможность выставить флаг высокого приоритета. Важно что этот флаг имеет больший приоритет нежели встроенные стили. Это значит, что у нас появляется возможность перебить эти самые встроенные стили на уровне стилей с селекторами. Немного изменив код из примера про встроенные стили получим следующий пример:

1
2
3
4
5
6
7
8

<style>
  span {
    color: red !important;
    font-size: 20px !important;
  }
</style>
<span id="a">1</span>
<span id="b" style="color: blue; font-size: 10px !important">2</span>

В этом случае цвет всех тегов span будет красный несмотря на атрибут style у тега с id “b” потому как красный цвет из стиля с селектором будет иметь больший вес чем у встроенного стиля. Он будет складываться из веса селектора плюс вес правила с флагом important чей вес больше, чем просто правило встроенного стиля.

Теперь попробуем оценить вес правила font-size отвечающего за размер шрифта. С одной стороны у нас есть “селектор” с “флагом” с другой стороны есть"встроенный стиль" с “флагом”. Если этот флаг есть по обе стороны баррикад, он перестает оказывать какой либо эффект и начинают действовать обычные правила где “встроенный стиль” приоритетнее селектора. По этому размер шрифта для id “b” будет выставлен в 10px.

Из-за эффекта выше лучше по возможности избегать применения флага приоритета, но в тоже время нет другого способа создать не переопределяемое правило нежели комбинация “встроенный стиль” с “флагом”.

Далее более подробно поговорим про веса селекторов