Css с высоким приоритетом

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

Специфичность — это способ, с помощью которого браузеры определяют, какие значения свойств 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 и таким же селектором, но расположенное в файле после существующего (при прочих равных выигрывает последнее объявленное правило):

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

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

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

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

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> 

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

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

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

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

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

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

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

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

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

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 непосредственно соответствует элементу, а стиль, задающий зелёный цвет, всего лишь унаследован от родителя.

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

• Калькулятор специфичности: Интерактивный сайт, помогающий вам проверить и понять ваши собственные правила CSS — https://specificity.keegan.st/
• Специфичность селекторов в CSS3 — http://www.w3.org/TR/selectors/#specificity
• Ключевые концепции CSS
  • Синтаксис CSS
  • @-правила
  • комментарии
  • специфичность
  • наследование
  • блочная модель
  • режимы компоновки
  • модели визуального форматирования
  • Схлопывание отступов
  • Значения
    • начальные
    • вычисленные
    • используемые
    • действительные

    Found a content problem with this page?

    This page was last modified on 30 нояб. 2022 г. by MDN contributors.

    Your blueprint for a better internet.

    Источник

    Приоритеты свойств в CSS

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

    Что же происходит, когда мы задаем свои значения CSS свойств?

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

    Определение «веса»

    Чтобы наглядно представлять суть определения приоритета (или другими словами — специфичность), используем следующую конструкцию: 0.0.0.

    А теперь вспомним способы задания свойств (адресация CSS): тэг, класс, ID. Так и заполняем нашу конструкцию, но только в обратном порядке: ID.класс.тэг.

    Конструкция, которая указывает, к какому элементу применяется свойство, называется селектором. Приоритет вычиcляется для всего селектора.

    Пример 1: div

    Селектор состоит из 1 тэга, значит специфичность его: 0.0.1

    Пример 2: div p

    Селектор состоит из 2 тэгов, значит специфичность его: 0.0.2

    Получается, что если в примерах 1 и 2 встречаются одинаковые CSS свойства, но с различными значениями, то к тэгу

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

    Пример 3: .block p

    Селектор состоит из 1 класса и 1 тэга, значит специфичность его: 0.1.1. Это больше, чем 0.0.2, т.к. мы имеем единицу в более значимом разряде (примерно как числа 10+1 и 1+1).

    Пример 4: div.block p

    Селектор состоит из 1 класса и 2 тэгов, значит специфичность его: 0.1.2.

    Пример 5: #home p

    Селектор состоит из 1 ID и 1 тэга, и он имеет еще больший приоритет, чем любой из предыдущих примеров, т.к. его специфичность равна 1.0.1 (условно можно считать как 100+0+1).

    Атрибуты

    Пример 6:
    HTML:

    CSS:
    div[class] < . >
    div.block

    У обоих селекторов будет специфичность 0.2.0. Значимость селектора по атрибуту равна значимости селектора по классу. А при равной специфичности выигрывает правило, идущее ниже по коду CSS.

    Псевдоклассы

    Псевдоклассы ( :first-child, :last-child, :nth-child и прочее) также имеют приоритет равный классам.

    Селектор :not().

    :not() сам ничего не дает, а добавляет вес селектора, который ему передали. Однако помните, что :not() может принимать только простые селекторы.

    .block:not(.some) будет иметь специфичность 0.2.0

    .block:not(div) будет иметь специфичность 0.1.1

    Небольшой совет по псевдоклассам: без особой необходимости не используйте псевдокласс :link для ссылок. Однажды прописав свойства для a:link, при переопределении вам придется использовать тот же псевдокласс :link, либо опираться на классы.

    «Important style»

    А еще ведь можно задать свойства через атрибут тэга style=»». Эти свойства имеют наибольший приоритет и легко переопределяют любое из предыдущих свойств и их комбинаций.

    Однако, дабы иметь возможность переопределить значение аттрибута style=»» средствами CSS, имеется усилитель свойства !important.

    Пример 7: может быть переопределен из CSS: div

    А вот если !important использовать внутри style=»», то уже ничто не поможет. Потому, как бы ни было сильно наше эго, не стоит так делать, так как вполне может появиться ситуация, когда свойство необходимо будет переопределить, а изменять HTML нельзя.

    Однако

    И снова нюансы — не надо путать наследование с каскадностью.

    Пример 8: Пропишем свойства #main и strong .

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

    При равном приоритете

    При равном приоритете (весе) CSS свойств применится то правило, которое идет ниже по коду.

    Пример 9: Имеем html и стили:
    .item
    .main
    В результате текст в нашем div будет черным (black). Порядок следования классов в html значения не имеет.

    CSS-tricks: 19 ways to override (обратите внимание на 7, 14, 16, 18)

    

    Инструмент наглядной проверки специфичности селектора:
    CSS explain

    Источник