Селекторы CSS влияют на стилевые приоритеты, причем в расчет берутся не только простые селекторы (классы, селекторы тегов, атрибуты и т.д.), но и составные (дочерние, соседние, селекторы потомков и т.д.).
Чтобы вычислить уровень приоритета (специфичности) какого-либо селектора браузеры используют определенный алгоритм, где каждому типу начисляется определенное количество баллов, определяющее вес селектора. Стили того селектора, который наберет больший вес, в конечном итоге и будут применены к элементу. Если же получится так, что какие-то селекторы, которые воздействуют на один и тот же HTML-элемент наберут одинаковое число баллов, то будут использованы стилевые свойства того, который находится в коде ниже.
А теперь давайте рассмотрим, каким же образом браузеры считают эти баллы.
1. Универсальный селектор — количество начисляемых баллов равно нулю (0).
2.Селекторы тегов и псевдоэлементы — по одному (1) баллу за каждый.
3.Селекторы атрибутов, классы и псевдоклассы — по десять (10) баллов за каждый.
4.Идентификаторы — по сто (100) баллов за каждый идентификатор находящийся в селекторе.
5.Атрибут style — встроенные стили не используют селекторов, а указываются непосредственно внутри тегов элементов, но при этом они имеют самый высокий приоритет исчисляемый тысячей (1000) баллов.
* { } /* 0 баллов */
em { } /* 1 балл */
p::first-letter { } /* 2 балла (один селектор тегов и один псевдоэлемент) */
p [title="Приветствие"] { } /* 11 баллов (по одному селектору тегов и атрибутов) */
div.fine .one { } /* 21 балл (два класса и один селектор тегов) */
Как видите все довольно просто. Только вы не пугайтесь заранее, думая, что вам придется постоянно высчитывать эти баллы при создании своих таблиц стилей. На самом деле их никто никогда просто так не считает. Обычно про селекторный приоритет вспоминают только тогда, когда какие-то стили не хотят работать. Вот тут-то и начинаются «танцы с бубном» и поиски виновного. :)
Правило !important
Правило !important используется в тех случаях, когда необходимо, чтобы конкретное свойство было обязательно применено к элементу вне зависимости от того, в каком селекторе и в каком месте CSS-кода оно находится, а также, невзирая на имеющиеся дубли. Общий синтаксис:
селектор { свойство: значение !important; }
Но это еще не все о правиле !important. Если вы , то пользователи также могут использовать CSS для изменения внешнего вида сайта. И естественно, если и в пользовательских и в авторских таблицах стилей присутствуют селекторы, которые пытаются изменить одно и то же свойство одного и того же HTML-элемента (например, цвет текста), то браузеру надо сделать выбор в пользу какого-то одного варианта. В этом случае они руководствуются следующим алгоритмом.
1. Самый низкий приоритет имеют стили установленные в браузере по умолчанию, как например вертикальные поля у параграфов.
2. Более высокий приоритет получают обычные стили подключаемые пользователями.
3. Еще более высокий — авторские стили, то есть Ваши.
4. Еще более высокий достается также авторским стилям, но у которых указан !important.
5. И наконец самый высокий приоритет получают стили пользователей с правилом !important. Это сделано для того, чтобы пользователи с ограниченными возможностями в любом случае могли изменить внешний вид страниц сайта под свои нужды.
Обратите внимание, что свойства с !important имеют даже более высокий приоритет, чем встроенные с помощью атрибута style.
Браузер считывает подключаемые стили по мере их появления в коде, то есть он сначала берет CSS из самого первого файла, затем ниже добавляет стили второго, еще ниже — третьего и так далее. Таким образом, создается одна общая каскадная таблица стилей, в которой действуют такие же правила приоритетов, как и в обычной таблице, состоящей из одного файла.
