Как сделать стиль приоритетным css

Обновлено: 04.07.2024

В данном посте мы разбирем такую особенность CSS, как каскадность и приоритетность. Из урока по наследованию вы наверняка помните, что для одного и того же элемента веб-страницы может быть применено несколько правил. Значит, браузер должен как-то решить, какое правило будет наиболее приоритетным для конкретной ситуации. А решает он это с помощью специальной системы, которая, как неудивительно называется каскадностью.

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

Видеоверсия:
[iframe align="center" mode="normal" autoplay="no" maxwidth="1280"]

Объединение унаследованных стилей

Так уж сложилось, что вложенные элементы обычно наследуют свойства у своих родителей и предков. Рассмотрим следующую ситуацию:

В примере выше мы задали семейство шрифта общему предку (body), размер - абзацам (p), и цвет - тегу em. На самой веб-странице мы увидим содержимое тега em шрифтом в 16px, семейства Arial и синего цвета. В нашем случае шрифт и размер были унаследованы от предка и родителя соответственно.

Значит, вложенные элементы могут наследовать неконфликтующие свойства. Но что произойдет, если мы зададим одно и то же свойство с разными значениями родителю и предку?

Преимущество имеет ближайший родительский элемент

Рассмотрим следующие правила оформления для главного тега страницы и всех абзацев:

Как вы думаете, каким цветом окрасится содержимое тега em, зеленым или красным? Конечно же красным (red), так как приоритет при наследовании всегда имеет свойство ближайшего родительского элемента. Учитывая вложенность тегов em в абзацы, их отображение красным цветом не вызывает удивления.

Приоритет всегда отдается конкретному стилю

А что будет, если к предыдущим правилам оформления мы зададим еще один? Например, цвет для того же тега em.

В этом случае, вполне логично, содержимое тега окрашивается в синий цвет (blue), так как для него есть конкретный определяющий стиль. Это значит, что конкретный стиль имеет приоритет над унаследованными.

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

Распределение приоритетности между конкретными стилями CSS

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

Например, через селектор тегов, классов и идентификаторов. Рассмотрим следующий пример, в котором у нас есть один абзац на странице, имеющий класс 'aly' и идентификатор 'main'. Для этого абзаца мы придадим разные цвета через соответствующие селекторы.

Какое же правило возьмет верх? Ведь все они обращены к одному и тому же элементу. Не знаю, удивитесь вы или нет, но наш единственный абзац будет окрашен в синий цвет. А происходит это потому, что каждый вид обращения имеет свой уровень важности. Он хорошо показан на иллюстрации ниже.

приоритетность в CSS

Как видно из иллюстрации, правило применяемое через селектор тегов имеет 1 балл значимости, класс - 10, а идентификатор - 100 баллов. Самая высокая значимость присуждается встроенным стилям, имеющим 1000 единиц важности. Встроенный стиль представляет из себя CSS правило, находящееся внутри html разметки:

При наличии подобного встроенного стиля, абзац будет окрашен в зеленый цвет (green). Однако, использование подобной техники оформления является нежелательным по двум причинам:

html разметка не предназначена для оформления;
могут возникнуть трудности при изменении оформления элемента, имеющего встроенный стиль, ведь любые обращения к ней через внешнюю таблицу стилей ничего не даст.

Приоритетность не имеет значения в случае наследуемых свойств.

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

В таблице ниже вы можете увидеть пример того, как могут суммироваться баллы для разных селекторов.

таблица приоритетностей в CSS

Последний стиль сродни окончательному решению

Может случиться так, что правила для одного и того же элемента могут иметь одинаковый балл по приоритетности. Как в этом случае поступит браузер? Какому CSS правилу он отдаст предпочтение? Рассмотрим на примере ниже.

У нас есть два форматирующих правила для одного и того же тега strong с классом bold, находящийся внутри абзаца с классом alive. Оба стиля имеют одинаковую важность - 11 баллов. Какому правилу браузер отдаст пальму первенства?

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

У нас может быть таблица стилей внушительных размеров, по причине чего становится довольно сложно использовать селектор с правильной приоритетностью, не говоря уже о возможности наличия где-нибудь встроенных стилей. Для решения данной задачи мы можем воспользоваться значением !important. Ее необходимо прописать к необходимому свойству.

При использовании такой записи все остальные свойства цвета будут игнорироваться браузером. Однако, нужно использовать данный прием с осторожностью, ведь применив его один раз, вы теряете контроль над данным свойством в будущем, пока не избавитесь от этого значения (!important).

Хитрость: гибкое использование правила последней записи

Одной из сложностей создания больших сайтов является необходимость использовать нестандартные стили для определенных страниц. То есть, для одних и тех же элементов разных страниц может понадобится использовать разные стили. Но как этого добиться?

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

Опасность частого использования селекторов по ID

Советую вам с осторожностью использовать селектор идентификаторов. Наличие у неё большого балла приоритетности может стать причиной проблем оформления вашего сайта. Обратите внимание на стили ниже.

Согласно первому правилу мы задаем черный цвет для всех абзацев внутри блока с идентификатором 'main'. Затем мы хотим выделить абзац с классом 'letter' отдельным цветом. Он находится внутри блока с идентификатором 'main'.

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

Однако, проблему она решает лишь частично, так как действует только на абзацы внутри блока с идентификатором 'main'. На абзацы с классом 'letter', находящиеся в других блоках она не подействует. Посему, будьте внимательны.

Итак, на этом урок по каскадности можно считать завершенным. Если есть вопросы или мысли по данной теме, буду рад видеть их в комментариях. Надеюсь, данный урок по CSS был для вас полезен. Если это так:

Сделайте репост данной статьи в социальных сетях, чтобы больше людей получили от нее пользу;
[popup_trigger tag="span"] Подписывайтесь [/popup_trigger] на мою рассылку, чтобы не пропустить полезные и интересные публикации на блоге.

На этом я с вами не прощаюсь. Спасибо за внимание и до встречи в следующих публикациях!

Существует четыре способа подключения стилей к вашему HTML-документу. Наиболее часто используемые методы — это встроенные CSS и внешние CSS.

Содержание

Ниже приведен пример внедрения CSS на основе вышеприведенного синтаксиса:

Получим следующий результат:

Атрибуты

Атрибут	Значение	Описание
type	text/css	Указывает язык таблицы стилей как тип содержимого (тип MIME). Обязательный атрибут.
media	screen tty tv projection handheld print braille aural all	Указывает устройство, на котором будет отображаться документ. Значение по умолчанию — all. Необязательный атрибут.

Встроенный CSS — атрибут стиля

Вы можете использовать атрибут для любого HTML-элемента для определения правил стиля. Эти правила будут применяться только к данному элементу. Вот общий синтаксис:

Атрибуты

Атрибут	Значение	Описание
style	Правила стиля	Значение атрибута style представляет собой комбинацию объявлений стиля, разделенных точкой с запятой (;).

Пример

Ниже приведен пример встроенного CSS на основе приведенного выше синтаксиса:

Получим следующий результат:

Внешний CSS стили — элемент

Вот общий синтаксис подключения внешнего файла CSS:

Атрибуты

Обработка старыми браузерами

Существует множество старых браузеров, которые не поддерживают CSS. Поэтому мы должны позаботиться о написании встроенного CSS в нашем HTML-документе. Следующий фрагмент кода показывает, как можно использовать теги комментариев, чтобы скрыть CSS из старых браузеров:

Комментарии в CSS

Вам может потребоваться добавить дополнительные комментарии в свои блоки страниц стилей. Таким образом, оформление комментариев в CSS происходит очень легко. Вы можете просто оставить свои комментарии внутри /*. это комментарий в CSS-файле. */.

Также Вы можете использовать /*. */ как для однострочных комментариев в CSS, так и для комментирования многострочных блоков аналогично тому, как это делается на языках программирования C и C++.

CSS — это каскадные таблицы стилей (Cascading Style Sheets). Каскадность — это главный принцип css — это приоритет одних правил/стилей над другими. Это когда одни стили перебивают другие.

Таблица веса (числа) для каждого селектора:

Из правил с одинаковым весом выбираются те, которые ближе к концу HTML страницы (ниже в коде).

Пример подсчета веса (вес представляет из себя число):

внутри элемента .text получит стиль color:red; , а не color:blue; , потому что число 111 больше чем 11.

Теперь давайте посчитаем веса на примере:

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

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

Приоритет @media

Медиа правила @media ( max-width:500px ) < >не участвуют в подсчете приоритета (веса).

Поэтому они всегда должны располагаться ниже всех остальных правил, чтобы перебивать предыдущие правила с таким же весом (приоритетом).

Специфичность - это способ, с помощью которого браузеры определяют, какие значения свойств CSS наиболее соответствуют элементу и, следовательно, будут применены. Специфичность основана на правилах соответствия, состоящих из селекторов CSS различных типов.

Как вычисляется специфичность ?

Специфичность представляет собой вес, придаваемый конкретному правилу CSS. Вес правила определяется количеством каждого из типов селекторов в данном правиле. Если у нескольких правил специфичность одинакова, то к элементу применяется последнее по порядку правило CSS. Специфичность имеет значение только в том случае, если один элемент соответствует нескольким правилам. Согласно спецификации CSS, правило для непосредственно соответствующего элемента всегда будет иметь больший приоритет, чем правила, унаследованные от предка.

Типы селекторов

В следующем списке типы селекторов расположены по возрастанию специфичности:

Универсальный селектор ( * ), комбинаторы ( + , > , ~ , ' ') и отрицающий псевдокласс ( :not() ) не влияют на специфичность. (Однако селекторы, объявленные внутри :not() , влияют)

Стили, объявленные в элементе (например, style="font-weight:bold" ), всегда переопределяют любые правила из внешних файлов стилей и, таким образом, их специфичность можно считать наивысшей.

Важное исключение из правил - !important

Когда при объявлении стиля используется модификатор !important , это объявление получает наивысший приоритет среди всех прочих объявлений. Хотя технически модификатор !important не имеет со специфичностью ничего общего, он непосредственно на неё влияет. Поскольку !important усложняет отладку, нарушая естественное каскадирование ваших стилей, он не приветствуется и следует избегать его использования. Если к элементу применимы два взаимоисключающих стиля с модификатором !important , то применён будет стиль с большей специфичностью.

Несколько практических советов:

Всегда пытайтесь использовать специфичность, а !important используйте только в крайних случаях
Используйте !important только в страничных стилях, которые переопределяют стили сайта или внешние стили (стили библиотек, таких как Bootstrap или normalize.css)
Никогда не используйте !important , если вы пишете плагин или мэшап.
Никогда не используйте !important в общем CSS сайта.

Вместо !important можно:

Использовать более специфичные правила. Чтобы сделать правило более специфичным и повысить его приоритет, укажите один элемент или несколько перед нужным вам элементом:

Вне зависимости от порядка следования правил, текст всегда будет зелёным, поскольку у этого правила наибольшая специфичность (при этом, правило для голубого цвета имеет преимущество перед правилом для красного, несмотря на порядок следования).

Вам придётся использовать !important если:

А) Первый сценарий:

У вас есть общий файл стилей, устанавливающий правила для внешнего вида сайта.
Вы пользуетесь (или кто-то другой пользуется) весьма сомнительным средством - объявлением стилей непосредственно в элементах

В таком случае вам придётся объявить некоторые стили в вашем общем файле CSS как !important , переопределяя, таким образом, стили, установленные в самих элементах.

Пример из практики: Некоторые плохо написанные плагины jQuery, использующие присваивание стилей самим элементам.

Как преодолеть !important

A) Просто добавьте ещё одно правило с модификатором !important , у которого селектор имеет большую специфичность (благодаря добавлению типа элемента (тэга), идентификатора (атрибута id) или класса к селектору).

Пример большей специфичности:

Б) Или добавьте правило с модификатором !important и таким же селектором, но расположенное в файле после существующего (при прочих равных выигрывает последнее объявленное правило):

В) Или перепишите первоначальное правило без использования !important .

С более подробной информацией можно ознакомиться по следующим ссылкам:

Не исключение - :not()

Отрицающий псевдокласс :not не учитывается как псевдокласс при расчёте специфичности. Однако селекторы, расположенные внутри :not , при подсчёте количества по типам селекторов рассматриваются как обычные селекторы и учитываются.

Следующий фрагмент CSS .

. применённый к такому HTML .

. отобразится на экране так:

Это текст в div.inner

Специфичность основана на форме

Специфичность опирается на форму селектора. В следующем примере, при определении специфичности селектора, селектор *[id="foo"] считается селектором атрибута, даже при том, что ищет идентификатор.

Эти объявления стилей .

. применённые к нижеследующей разметке .

. в результате выглядят так:

Потому что оба правила соответствуют одному и тому же элементу, но селектор идентификатора имеет большую специфичность.

Независимость от расположения

Взаимное расположение элементов, указанных в селекторе не влияет на специфичность правила. Следующие объявления стилей .

. в сочетании со следующим HTML .

Потому что, хотя оба объявления имеют одинаковое количество типов селекторов, но селектор html h1 объявлен последним.

Непосредственно соответствующие элементы и унаследованные стили

Стили непосредственно соответствующих элементов всегда предпочитаются унаследованным стилям, независимо от специфичности унаследованного правила. Этот CSS .

. тоже отобразится как:

Потому что селектор h1 непосредственно соответствует элементу, а стиль, задающий зелёный цвет, всего лишь унаследован от родителя.

Читайте также: