11.5 C
Москва
19.10.2026

19

Как задать стилю приоритет в css

Приоритет в css

Что в css приоритетнее? То, что указано в аттрибуте style=»» или то, что с !important? Можно ли чем-то перекрыть style?

Отслеживать
задан 18 авг 2016 в 18:45
JamesJGoodwin JamesJGoodwin
3,968 6 6 золотых знаков 39 39 серебряных знаков 73 73 бронзовых знака

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

!important перебивает стили, вне зависимости от порядка подключения последних.

Вообще, порядок такой:

  1. Стили из и — применяются в первую очередь, в том порядке, в каком подключались в html;
  2. Инлайновые стили (те, что в style=»» ) применяются вторыми;

!important же перебивает любые стили, неважно, где они были объявлены.

P.S. Перебить !important стиль может только такой же !important , только объявленный позже.

Приоритет в CSS

Элемент HTML может быть целью нескольких правил CSS. Давайте воспользуемся простым абзацем в качестве примера:

Мы можем изменить этот абзац просто используя имя тега:

Или же можем воспользоваться именем класса:

.message

Или можем использовать идентификатор:

#introduction

Поскольку браузер может выбрать только один цвет и применить его к этому абзацу, то он должен решить, какое правило CSS имеет приоритет над другими. Это называется приоритетом в CSS (или специфичностью).

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

Порядок правил CSS

Если в вашем CSS есть одинаковые селекторы, то последний из них будет иметь приоритет.

p < color: green; >p < color: red; >/* Абзац будет красным */

Вычисление 100

Есть один быстрый способ выяснить, насколько правило CSS «сильное», путём вычисления специфичности селекторов:

Селектор с наивысшим «счётом» будет преобладать, независимо от порядка, в котором появляются правила CSS.

#introduction < color: red; >.message < color: green; >p

Правило #introduction < color: red; >является более специфичным, чем другие, потому что идентификаторы должны быть уникальными по всей веб-странице, таким образом, может быть только один целевой элемент.

.message < color: green; >будет нацелен на любой HTML-элемент с атрибутом class=»message» и, следовательно, менее специфичен. То же самое относится и к p < color: blue; >, который может предназначаться для любого абзаца.

Как избежать конфликтов

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

Чтобы избежать этого:

  • применяйте только классы: используйте .introduction вместо #introduction , даже если этот элемент появляется на вашей веб-странице только один раз;
  • избегайте применять несколько классов к одному элементу HTML: пишите не , а , который является семантически более описательным;
  • не используйте встроенные стили, такие как .

Специфичность

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

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

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

Примечание: Примечание: Взаимное расположение элементов в дереве документа не влияет на специфичность.

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

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

  1. селекторы типов элементов (например, h1 ) и псевдоэлементов (например, ::before ).
  2. селекторы классов (например, .example ), селекторы атрибутов (например, [type=»radio»] ) и псевдоклассов (например, :hover ).
  3. селекторы идентификаторов (например, #example ).

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

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

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

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

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

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

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

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

div id="test"> span>Textspan> div> 
div#test span  color: green; > div span  color: blue; > span  color: red; >

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

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

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

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

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

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

#someElement p  color: blue; > p.awesome  color: red; >

Как сделать цвет текста в абзацах awesome красным всегда, даже если они расположены внутри #someElement ? Без !important у первого правила специфичность больше и оно имеет преимущество перед вторым.

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

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

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

table td  height: 50px !important; > .myTable td  height: 50px !important; > #myTable td  height: 50px !important; >

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

td  height: 50px !important; >

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

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

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

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

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

div.outer p  color: orange; > div:not(.outer) p  color: lime; >

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

div class="outer"> p>Это div.outerp> div class="inner"> p>Это текст в div.innerp> div> div>

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

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

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

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

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

*#foo  color: green; > *[id="foo"]  color: purple; >

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

p id="foo">Это пример.p>

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

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

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

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

body h1  color: green; > html h1  color: purple; >

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

html> body> h1>Вот заголовок!h1> body> html>

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

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

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

#parent  color: green; > h1  color: purple; > 
html> body id="parent"> h1>Вот заголовок!h1> body> html>

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

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

Дополнительная информация

Похожие записи

Что такое эмодзи в телефоне айфон

admin

Как сделать поля для ввода html

admin

Как удалить пустые строки в таблице word

admin