Специфичность css: Специфичность — CSS | MDN

Специфичность — CSS | MDN

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

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

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

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

0. селекторы типов элементов (например, h2) и псевдоэлементов (например, ::before).
1. селекторы классов (например, .example), селекторы атрибутов (например, [type="radio"]) и псевдоклассов (например, :hover).
2. селекторы идентификаторов (например, #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>
     <span>Text</span>
   </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.

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

Когда надо использовать !important в CSS?

Что означает !important в CSS?

Когда в CSS надо использовать модификатор !important

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

Как использовать модификатор !important в CSS чтобы сэкономить время

Не исключение —

:not()

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

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

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

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

<div>
  <p>Это div.outer</p>
  <div>
    <p>Это текст в div.inner</p>
  </div>
</div>

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

Это div.outer

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

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

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

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

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

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

<p>Это пример.</p>

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

Это пример.

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

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

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

body h2 {
  color: green;
}
html h2 {
  color: purple;
}

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

<html>
<body>
  <h2>Вот заголовок!</h2>
</body>
</html>

… отобразится как:

Вот заголовок!

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

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

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

#parent {
  color: green;
}
h2 {
  color: purple;
}

… с таким HTML …

<html>
<body>
  <h2>Вот заголовок!</h2>
</body>
</html>

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

Вот заголовок!

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

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

Как CSS специфичность работает в браузере / Хабр

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

Что такое CSS специфичность?

Вы когда-нибудь писали стиль, а он не работает, потом вы добавляете

!important

(или нет), и все же он не работает? Затем вы смотрите на Devtools и понимаете, что другой стиль где-то перекрывает ваш?

В этом и заключается специфичность CSS! Именно так браузер выбирает, какой из конкурирующих селекторов применить к элементу. Когда браузер видит, что два или более селектора совпадают с одним и тем же элементом, и у селекторов есть конфликтующие правила, ему нужен способ выяснить, какое из правил применить к этому элементу. То, как это происходит, называется «значение специфичности CSS».

Прежде чем мы углубимся в CSS специфичность, запомните эти вещи:

1. Специфичность CSS важна только тогда, когда несколько селекторов влияют на один и тот же элемент. Браузеру нужен способ выяснить, какой стиль применять к соответствующему элементу, когда существуют противоречивые значения свойств.
2. Когда два или более совпадающих селектора имеют одно и то же значение (вес) специфичности, браузер выбирает «самый последний» совпадающий селектор, который появляется ближе к нижней части списка совпадающих селекторов. Следующий пункт объясняет, что такое «список подходящих селекторов».
3. Браузер формирует «список подходящих селекторов», комбинируя все стили на веб-странице и отфильтровывая те, которые не соответствуют элементу «currently-being-styled». Первые селекторы в таблице стилей находятся вверху списка, а последние селекторы — внизу.
4. Свойство style для элемента имеет большее значение специфичности, чем селекторы в таблицах стилей, за исключением случаев, когда есть !important в селекторе таблиц стилей.
5. Использование !important (что в некоторых случаях считается плохой практикой) изменяет специфичность селектора. Когда два селектора имеют одинаковую специфичность, выигрывает селектор с !important. И когда они оба имеют !important, «самый последний» селектор выигрывает.

Значение специфичности

Теперь мы можем перейти к тому, как браузер определяет значения специфичности селектора.

Специфичность селектора может быть представлена в виде трехзначной строки, разделенной дефисом (или чем угодно): «2–4–1». Первая цифра — это количество присутствующих селекторов ID, вторая — это количество селекторов классов, селекторов атрибутов и псевдоклассов, а третья — количество имеющихся селекторов типов и псевдоэлементов. Например:

#red.blue // 1-1-0
#green // 1-0-0
div.yellow#red // 1-1-1
.red.blue.yellow // 0-3-0

Определение самого “специфичного”

Чтобы определить, какой селектор обладает большей специфичностью, вы можете сравнить каждое из трех значений.

Скажем, у вас есть 1-1-1 и 0-3-0, как в двух последних примерах, и вам нужно определить, какой из них имеет большую специфичность. Сначала вы сравниваете последние значения 1 и 0, и в этом случае выигрывает 1. Это означает, что на данный момент div.yellow#red имеет большее значение специфичности… но мы еще не закончили сравнение значений.

Далее сравниваем значения 1 и 3, 3 выигрывает. На данный момент .red.blue.yellow имеет большее значение специфичности.

Наконец, сравниваем первые значения, 1 и 0, и выигрывает 1, так что div.yellow#red обладает большей специфичностью, чем .red.blue.yellow.

CSS-специфичность селектора и дает хорошее объяснение того, почему никакое количество селекторов классов не может переопределить селектор ID.

Небольшие предупреждения

3 “подводных камня”, о которых нужно знать:

1. Выше я писал, что второе число в последовательности чисел, состоящей из трех, представляет собой «число селекторов классов, селекторов атрибутов и псевдоклассов». Это верно во всех случаях, кроме случаев, когда это: :not() псевдокласс. Когда это :not() псевдокласс, мы не считаем его, а просто игнорируем. Но селекторы внутри него не игнорируются, они считаются нормально.
2. CSS специфичность понимает “форму” селектора. Это означает, что когда у вас есть *[id="yellow"] и #yellow, первый рассматривается как селектор атрибутов.
3. Универсальный селектор * сам по себе не засчитывается в значение специфичности селектора. В пункте выше [id="yellow"] часть селектора — это то, что на самом деле имеет значение.

Надеюсь, что эта статья проста для понимания и помогла разобраться, что такое CSS специфичность. Теперь вы можете посмотреть на стиль и с легкостью определить, насколько он «специфичен».

CSS: Специфичность (приоритет) селекторов

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

Специфичность селекторов (selector’s specificity) определяет их приоритет в таблице стилей. Чем специфичнее селектор, тем выше его приоритет. Для вычисления специфичности селектора используются три группы чисел (a, b, c), расчёт производится следующим образом:

• Считается число идентификаторов в селекторе (группа a)
• Считается число селекторов классов, атрибутов и псевдо-классов в селекторе (группа b)
• Считается число селекторов типа и псевдо-элементов в селекторе (группа c)
• Селектор внутри псевдо-класса отрицания (:not) считается как любой другой селектор, но сам псевдо-класс отрицания не участвует в вычислении селектора
• Универсальный селектор (*) и комбинаторы не участвуют в вычислении веса селектора

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

*               /* a=0 b=0 c=0 -> специфичность =   0 */
li              /* a=0 b=0 c=1 -> специфичность =   1 */
ul li           /* a=0 b=0 c=2 -> специфичность =   2 */
ul ol+li        /* a=0 b=0 c=3 -> специфичность =   3 */
h2 + *[rel=up]  /* a=0 b=1 c=1 -> специфичность =  11 */
ul ol li.red    /* a=0 b=1 c=3 -> специфичность =  13 */
li.red.level    /* a=0 b=2 c=1 -> специфичность =  21 */
#x34y           /* a=1 b=0 c=0 -> специфичность = 100 */
#s12:not(p)     /* a=1 b=0 c=1 -> специфичность = 101 */

Самый высокий приоритет имеет число из группы «a», число группы «b» имеет средний приоритет, число из группы «c» имеет наименьший приоритет. Числа из разных групп не суммируются в одно общее, т.е. возьмём из примера последнюю строку со специфичностью селектора «101» — это не означает число «сто один», это значит, что был использован один селектор из группы «a» (идентификатор) и один селектор из группы «c» (селектор типа).

Встроенный стиль, имеет больший приоритет, чем стиль определённый во внутренней или внешней таблице стилей. Однако, если для конкретного свойства во внутренней или внешней таблице стилей указать специальное объявление !important, то оно будет иметь больший приоритет, чем значение аналогичного свойства, у внутреннего стиля. Объявление !important указывается после значения свойства перед точкой с запятой:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      #one { color: red; }
      #two { color: blue !important; }
    </style>
  </head>
  <body>

    <p>Первый абзац</p>
    <p>Второй абзац.</p>

  </body>
</html>

Попробовать »

С этой темой смотрят:

Сколько весят селекторы? • Про CSS

Все CSS-селекторы имеют свой вес, который определяет как взаимодействуют одинаковые свойства, заданные в разных местах кода одному и тому же элементу.

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

Вот пример проблемы. Есть див с id="container", внутри него некоторый текст и список ссылок.

<div>
  <p><a href="#">link in P</a></p>

  <ul>
    <li><a href="#">Link1</a></li>
    <li><a href="#">Link2</a></li>
  </ul>
</div>

Сначала задаём всем ссылкам внутри #container оранжевый фон:

#container A {
  background: orange;
}

А потом, чтобы в списке .list внутри контейнера ссылки имели зелёный фон, ниже дописываем такое:

.list A {
  background: mediumspringgreen;
}

Казалось бы, ссылки в тексте должны получить оранжевый фон, а ссылки в списке — зеленый, но нет:

Почему так? Потому, что первый селектор содержит ID и перевешивает второй, то есть:

#container A > .list A

Вес селектора

Специфичность селектора рассчитывается по 4-м позициям:

Для каждого из них подсчитывается количество подходящих элементов в селекторе, и это число помещается в соответствующую позицию.

Пример:

Вес селекторов (по убыванию):

style=""1,0,0,0

#id0,1,0,0

.class0,0,1,0

[attr=value]0,0,1,0

LI0,0,0,1

*0,0,0,0

У стилей, заданных в атрибуте style, на первой позиции будет единица — 1,0,0,0. Это самая высокая специфичность, которая перевешивает свойства, заданные другими способами.

Переопределить стили, заданные в style, можно дописав !important к значению свойства в таблице стилей.

Обратный вариант — универсальный селектор *, он не имеет веса: 0,0,0,0.

Примеры:

LI0,0,0,1 — селектор по тегу

UL LI0,0,0,2 — селектор c двумя тегами весит больше, чем с одним.

.orange0,0,1,0 — селектор с классом весит больше, чем селектор с тегом.

.orange A SPAN0,0,1,2 — селектор перевесит предыдущий, потому что помимо класса содержит два тега.

#page .orange0,1,1,0 — селектор с ID перевесит всё, кроме inline-стилей.

Теперь сравним селекторы из исходного примера:

#container A0,1,0,1

.list A0,0,1,1

0,1,0,1 > 0,0,1,1 — хорошо видно, что селектор с ID весит больше, чем селектор с классом, поэтому все ссылки имеют оранжевый фон, хотя ниже в коде им задан зеленый.

Варианты решений

1. Добавить !important

#container A {
  background: orange;
}

.list A {
  background: mediumspringgreen !important;
}

Ссылки получат зеленый фон, быстро и легко.
Но это плохой способ, потому что код запутывается ещё больше.
Со временем для переопределения !important в одном месте может потребоваться добавить его в других местах. Иерархичность начнет работать не сверху низ и от общего к частному, а как попало. В конце-концов поддерживать такой код будет весьма проблематично.

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

2. Следующий очевидный способ — добавить #container ко второму селектору, чтобы увеличить его вес:

#container A {
  background: orange;
}

#container .list A {
  background: mediumspringgreen;
}

Это тоже сработает, но решение так себе: удлиняется цепочка селекторов (что может отразиться на скорости отрисовки страницы) и ухудшается читаемость кода.
Так тоже делать не стоит.

1-й и 2-й способ могут использоваться, если у вас нет доступа к разметке, а в ней нет нужных классов.
Если же вы можете редактировать разметку либо классы у элементов таки есть — используйте последний способ, самый правильный:

3. Просто не используйте в стилях селекторы с ID, используйте классы.

Посмотрим на разницу между #container и с .container:

#container A0,1,0,1 — селектор с ID перевешивает всё вне зависимости от своего расположения в коде.

Заменим в разметке страницы id на class:

.container A0,0,1,1 — селектор с классом весит меньше, он менее специфичен.

Селектор ссылок в списке весит столько же:

.list A0,0,1,1

Это означает, что при равном весе селекторов применятся стили, объявленные ниже в коде.
То есть достаточно будет просто написать стили, следуя от общего к частному, сверху вниз.

В итоге разметка может быть такой:

<div>
  <p><a href="#">link in P</a></p>

  <ul>
    <li><a href="#">Link1</a></li>
    <li><a href="#">Link2</a></li>
  </ul>
</div>

А стили — такими:

.container A {
  background: orange;
}

.list A {
  background: mediumspringgreen;
}

И код работает так, как ожидается:

Если id в вашей разметке уже используется в Js, логичнее будет добавить элементу класс и перевесить стили на него. Если же id участвует только в разметке — лучше заменить его на class.

В качестве общих рекомендаций так же следует упомянуть, что нужно как можно меньше использовать селекторы по тегу и как можно больше — селекторы по классу. Это поможет избежать проблем при повторном использовании блоков сайта, а при использовании «умных» классов — может значительно сократить цепочки селекторов, увеличить читабельность кода и скорость отрисовки страницы.

Спецификации:

Specificity специфика CSS уроки для начинающих академия

Что такое специфика?

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

Подумайте о специфике как оценка/ранг, который определяет, какие объявления стиля в конечном итоге применяются к элементу.

Универсальный селектор (*) имеет низкую специфичность, а селекторы ID очень специфичны!

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

Иерархия специфики

Каждый селектор имеет свое место в иерархии специфичности. Существует четыре категории, определяющие уровень специфичности селектора:

Встроенные стили — встроенный стиль присоединяется непосредственно к элементу для стиля. Пример: < стиль h2 = «цвет: #ffffff;» >.

IDS — идентификатор является уникальным идентификатором для элементов страницы, например #navbar.

Классы, атрибуты и псевдо-классы — эта категория включает классы, [атрибуты] и псевдо-классы, такие как: hover,: фокус и т.д.

Элементы и псевдо-элементы — эта категория включает имена элементов и псевдо-элементы, такие как h2, div,: before и: After.

Как рассчитать специфику?

Запомнить, как рассчитать специфику!

Начните с 0, добавьте 1000 для атрибута Style, добавьте 100 для каждого идентификатора, добавьте 10 для каждого атрибута, класса или псевдо-класса, добавьте 1 для каждого имени элемента или псевдо-элемента.

Рассмотрим эти три фрагмента кода:

Пример

A: h2
B: #content h2
C: <div><h2>Heading</h2></div>

Специфика A — 1 (один элемент)
Специфика B-101 (одна ссылка на идентификатор и один элемент)
Специфика C-1000 (встроенный стиль)

Начиная с 1 < 101 < 1000, третье правило (c) имеет больший уровень специфичности и поэтому будет применено.

Правила специфики

Равная специфичность: Последнее количество правил — если одно и то же правило дважды записывается во внешнюю таблицу стилей, то нижнее правило в таблице стилей ближе к элементу, который необходимо присвоить стилю, и поэтому будет применено:

Пример

h2 {background-color: yellow;}
h2 {background-color: red;}

Последнее правило применяется всегда.

Селекторы идентификаторов имеют более высокую специфичность, чем селекторы атрибутов -посмотрите на следующие три строки кода:

Пример

div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}

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

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

Пример

From external CSS file:
#content h2 {background-color: red;}

In HTML file:
<style>
#content h2 {
    background-color:
yellow;
}
</style>

Последнее правило будет применяться.

Селектор класса превосходит любое количество селекторов элементов-Выбор класса, например. интро бьет h2, p, Div и т.д.:

Пример

.intro {background-color: yellow;}
h2 {background-color:
red;}

Универсальный селектор и унаследованные значения имеют специфичность 0 -*, Body * и аналогичные имеют нулевую специфичность. Унаследованные значения также имеют специфичность 0.

Специфичность селекторов в ЦСС

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

В русскоязычных статьях термин specificity переводят как «специфичность», но на мой взгляд, его суть лучше передаётся словом «вес»

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

В русскоязычных статьях термин specificity переводят как «специфичность», но на мой взгляд, его суть лучше передаётся словом «вес»

Простыми словами принцип можно описать так — чем конкретнее задан селектор правила, тем больше его «вес».

Выбор конкретного правила зависит от трёх составляющих (в порядке возрастания значимости):

1. Порядок правила в коде.

2. Значение специфичности селектора.

3. Модификатор !important.

На самом деле специфичность рассчитывается несколько иным способом, но таблица отражает настоящие значения

Таблица для расчёта специфичности селекторов выглядит так:

На самом деле специфичность рассчитывается несколько иным способом, но таблица отражает настоящие значения

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

Комбинаторы >, +, ~, селектор * и псевдокласс :not не влияют на специфичность.

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

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

Что ещё почитать

Приоритетность селекторов в CSS (специфичность селекторов, selector’s specificity)

Введение в использование CSS селекторов

Допустим, у Вас есть несколько селекторов которые ссылаются на один и тот же элемент:

div span { text-decoration:underline; }
span { text-decoration:none; }

Открыв HTML страницу где элемент span находится внутри элемента div мы увидим подчеркнутый текст. А если мы пойдем дальше и с помощью плагина Firebug посмотрим стили вложенного элемента, мы увидим следующее:

div span {
    text-decoration:underline;
}
span {
    text-decoration:none;
}

Сразу же возникает вопрос о причине такого поведения. Ведь второй селектор должен перекрывать первый учитывая каскадность стилей. Данный пример как нельзя четко показывает что такое специфичность селекторов.

Правила специфичности

Специфичность селекторов (selector’s specificity) определяет их приоритетность в таблице стилей. Чем специфичнее селектор, тем выше его приоритет.

В спецификации по CSS 2.1 этой теме посвящен небольшой раздел. Существует 4 правила по которым вычисляется специфичность селекторов:

1. Самый высокий приоритет имеет атрибут style. Это правило перекрывает все селекторы описанные в стилях.
2. Второе место занимает присутствие ID в селекторе(#some-id).
3. Далее идут все атрибуты(в том числе и атрибут class) и псевдоклассы(pseudo-classes) в селекторе.
4. Самый низкий приоритет у селекторов с именами элементов и псевдоэлементами(pseudo-elements).

Все 4 правила сводятся в одну систему a-b-c-d(где а — наивысший приоритет) и образуют специфичность.

Далее рассмотрим принцип построения такой системы специфичности на примере разнообразных селекторов:

Пример специфичности — правило №1:

<head>
<style type="text/css">
    #summary { color: red }
</style>
</head>
<body>
    <p>content</p>
</body>

Текст внутри элемента p будет отображаться синим цветом независимо от селектора с айди(id), где также указано свойство color со значением red. Правило номер 1 всегда перекрывает все селекторы и имеет наивысшую приоритетность.

Правило №2:

<head>
    <style type="text/css">
        #second { color:green; }
        ul li.second { color:blue; }
    </style>
</head>
<body>
    <ul>
        <li>first</li>
        <li>second</li>
    </ul>
</body>

Несмотря на то что селектор с id указан в стилях сверху, именно он повлияет на отображение документа, так как более специфичен нежели селектор с классом second.

Правило №3:

<head>
    <style type="text/css">
       input[type=text] { font-weight:bold; }
       form input { font-weight:normal; }
    </style>
</head>
<body>
    <form action="" method="post">
        <input type="text" name="Company" />
        <input type="submit" name="Ok" />
    </form>
</body>

Текст внутри поля ввода будет отображаться жирным, а второй селектор определит стили только для кнопки отправки запроса.

Вернемся к первому примеру этой статьи — правило №4:

div span { text-decoration:underline; }
span { text-decoration:none; }

Первый селектор выигрывает у второго потому что включает в себя 2 последних правила специфичности, в то время как второй — всего одно. Чтобы убрать декорирование текста в данном случае следует использовать класс или более специфичный селектор:

div span { text-decoration:underline; }
body span { text-decoration:none; }

Теперь селекторы имеют одинаковый вес(0-0-0-2 = 0-0-0-2) касательно специфичности. Второй селектор просто перекроет свойство первого так как описан ниже.

Уверен, что большинство верстальщиков точно знают 2 первых правила специфичности селекторов про id и style и эта статья не была для них чем-то новым. Но не стоит забывать о двух оставшихся, ведь это может существенно приостановить процесс создания верстки и увеличить время выявления возникшей ошибки.

Вот и все о чем я хотел рассказать. Надеюсь, что статья была вам интересна.

—
Владислав Razor Чапюк, апрель 2009

Если Вам понравилась статья, проголосуйте за нее

Голосов: 35
Голосовать  

Especificidade — CSS | MDN

Особый — это манера поведения навигатора, определяющая quais valores de propriedades são os mais related para o elemento a ser utilizado. Специальная основа апенас нас regras Impostas na composição de Diferentes tipos de seletores.

Особый расчет на concatenação da contagem de cada tipo de seletor. Não é um peso aplicado na expressão corredente.

No caso de igualdade de especificação, ltima declaração encontrada no CSS é aplicada ao elemento.

Примечание: O fato de elementos estarem próximos na árvore do documento não tem efeito sobre a especificação.

Ordem crescente de especificação

Seguinte lista de seletores está includes na especificação:

• Seletores Universais
• Tipo de Seletores
• Классы seletoras
• Наборы атрибутов
• Псевдоклассы
• Seletores ID
• Estilo Встроенный

A exceção

! Important

Quando a regra ! Important используется, чтобы объявить заменяющий квалификатор вне декларации без CSS.Contudo, ! Important não tem nada a ver com especificação.

A exceção

: not

A pseudo-class de negação : not não é считает uma pseudo-class no cálculo de especificação. Contudo, seletores colocados na pseudo-class de negação são entendidos como seletores normais.

Aqui está um trecho de CSS:

  div.outer p {
  оранжевый цвет;
}
div: not (.outer) p {
  цвет: салатовый;
}
  

Usado com o seguindo código HTML:

  

  
 Esta é a div external.
  

    
 Este texto está na div inner. 
  

  

Irá aparecer na tela assim:

Esta é a div external.

Este texto está na div inner.

Especificação Form-based

Especificação é baseada na forma de um seletor. Никакого перехода, или выбор может содержать атрибуты без алгоритма детерминации особого идентификатора, выбравшего свой идентификатор.

A seguir veja as declarações de estilo:

  * #foo {
  цвет: зеленый;
}
* [id = "foo"] {
  фон: фиолетовый;
}
  

Usado com esta marcação:

  
 Eu sou um simples texto.
  

Vai acabar parecendo algo como:

Eu sou um simples texto.

Porque совпадает с com o mesmo elemento, mas o seletor de ID tem uma especificação superior.

Estrutura aproximada

A seguir a declaração do estilo:

  корпус h2 {
  цвет: зеленый;
}
html h2 {
  цвет: фиолетовый;
}
  

Com o HTML seguinte ::

  

  
 Aqui está o título! 
 

  

Vamos ter algo como:

Aqui está o título!

• Espcificação de Seletores CSS — http: // www.w3.org/TR/selectors/#specificity

Ключевые концепции

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

Специфика CSS

Что такое специфичность?

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

Думайте о специфике как о балле / ранге, который определяет, какие декларации стиля
в конечном итоге применяются к элементу.

Универсальный селектор (*) имеет низкую специфичность, в то время как селекторы ID очень
специфический!

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

Иерархия специфичности

Каждый селектор имеет свое место в иерархии специфики.Есть четыре
категории, определяющие уровень специфичности селектора:

Встроенные стили — Встроенный стиль прикрепляется непосредственно к элементу, который нужно стилизовать. Пример:

.

ID — ID — это уникальный идентификатор для элементов страницы, таких как
#navbar.

Классы, атрибуты и псевдоклассы — Эта категория
включает .classes, [атрибуты] и псевдоклассы, такие как: hover,: focus и т. д.

Элементы и псевдоэлементы — В эту категорию входят
имена элементов и псевдоэлементы, такие как h2, div,: before и: after.

Как рассчитать специфичность?

Запомните, как рассчитывать специфичность!

Начните с 0, добавьте 1000 для стиля
атрибут, добавьте 100 для каждого идентификатора, добавьте 10 для каждого атрибута, класса или
псевдокласс, добавьте 1 для каждого имени элемента или псевдоэлемента.

Рассмотрим эти три фрагмента кода:

Пример

A: h2
B: #content h2
C:

Специфичность A равна 1 (один элемент)
Специфичность B равна
101 (одна ссылка ID и один элемент)
Специфичность C — 1000 (встроенный стиль)

Поскольку 1 <101 <1000, третье правило (C) имеет больший уровень специфичность, и поэтому будет применяться.

Правила специфичности

Равная специфичность: последнее правило насчитывает —
Если одно и то же правило дважды записано во внешнюю таблицу стилей, то
нижнее правило в таблице стилей ближе к элементу, который нужно стилизовать, и поэтому будет применено:

последнее правило применяется всегда.

Селекторы ID имеют более высокую специфичность, чем селекторы атрибутов
— Посмотрите на следующие три строки кода:

Пример

div # a {background-color: green;}
#a {background-color: yellow;}
div [id = a] {background-color: blue;}

Попробуйте сами »

первое правило более конкретное, чем два других, и будет применяться.

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

Пример

Из внешнего файла CSS:
#content h2 {background-color: red;}

В файле HTML:

будет применяться последнее правило.

Селектор класса превосходит любое количество селекторов элементов — селектор класса, такой как .intro, превосходит h2, p, div и т. Д .:

Универсальный селектор и унаследованные значения имеют специфичность 0 — *,
body * и подобные имеют нулевую специфичность. Унаследованные значения также имеют
специфичность 0.

Особенности специфики CSS | CSS-уловки

Рассмотрим подробнее эту тему. (римшот!)

Лучший способ объяснить это — начать с примера того, где конкретность сбивает с толку и, возможно, ведет себя не так, как вы ожидаете.Затем мы подробнее рассмотрим, как вычислить фактическое значение специфичности, чтобы определить, какой селектор имеет приоритет.

Вот простой неупорядоченный список:

  

   
 Виски и имбирный эль. 
   
 Пшеничное пиво 
   
 Mint Julip 
  

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

  

   
 Виски и имбирный эль. 
   
 Пшеничное пиво 
   
 Mint Julip 
  

Теперь вы открываете свой CSS и задаете стиль для своего нового класса:

  .favorite {
  красный цвет;
  font-weight: жирный;
}  

Тогда вы посмотрите на свою работу, но, увы, не сработало! Текст любимого напитка не стал красным или жирным! Здесь работает что-то подозрительное.

Покопавшись в CSS, вы обнаружите:

  ul # summer-drinks li {
   шрифт: нормальный;
   размер шрифта: 12 пикселей;
   черный цвет;
}  

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

Я думаю, это смущает некоторых новичков, потому что они еще не совсем разобрались с этим. Они могут подумать, потому что выражение .favorite — это « дальше в CSS » или потому что class = «favourite» — это « ближе к фактическому тексту » в HTML, который будет «победителем».

Фактически, порядок селекторов в вашем CSS действительно играет роль, и более низкий вариант действительно выигрывает, когда значения специфичности точно такие же. Например:

 .любимый {
   красный цвет;
}
.любимый {
   черный цвет;
}  

Цвет будет черный… но я отвлекся.

Дело здесь в , вы хотите быть настолько конкретным, насколько имеет смысл быть при каждом удобном случае. Даже с помощью простого примера, представленного выше, в конечном итоге вам станет очевидно, что простое использование имени класса для таргетинга на этот «любимый напиток» не приведет к его сокращению или не будет очень безопасным, даже если это сработает. Было бы разумно использовать это:

  ul # summer-drinks li.любимый {
  красный цвет;
  font-weight: жирный;
}  

Это то, что я называю «быть настолько конкретным, насколько это имеет смысл». На самом деле вы могли бы быть более конкретным и использовать что-то вроде этого:

  html body div # pagewrap ul # summer-drinks li.favorite {
  красный цвет;
  font-weight: жирный;
}  

Но это перебор. Это затрудняет чтение вашего CSS и не дает реальных преимуществ. Еще один способ повысить значение специфичности вашего класса «.favorite» — использовать объявление! Important.

  .favorite {
  цвет: красный! важно;
  шрифт: жирный! важно;
}  

Однажды я слышал, что! Important похож на трюк джедаев с CSS. Действительно, это так, и вы можете заставить свою волю стилизовать элементы, используя его. Но! Important требует, чтобы это произошло за счет резкого увеличения специфичности этого конкретного свойства селектора.

Объявление! Important может быть неправильно понято. Лучше всего использовать его для очистки вашего CSS в примерах, где вы знаете, что элементы с определенным селектором классов должны использовать определенный набор стилей независимо от того, какой .И наоборот, он не используется просто как костыль для переопределения стиля чего-либо вместо того, чтобы выяснить, как был структурирован и работает CSS первоначальный автор.

Один из моих классических примеров:

  .last {
   маржа справа: 0! важно;
}  

Я часто использую это в ситуациях, когда есть несколько плавающих блоков, для последнего блока справа в строке. Это гарантирует, что у последнего блока нет правого поля, которое могло бы помешать ему плотно прилегать к правому краю своего родителя.У каждого из этих блоков, вероятно, есть более конкретные селекторы CSS, которые применяют правое поле для начала, но! Important преодолеет это и позаботится об этом с помощью одного простого / чистого класса.

Расчет значения специфичности CSS

Почему наша первая попытка изменить цвет и вес шрифта не удалась? Как мы узнали, это произошло потому, что простое использование имени класса само по себе имело на более низкое значение специфичности и было вытеснено другим селектором, который нацелился на неупорядоченный список со значением идентификатора.Важными словами в этом предложении были class и ID . CSS применяет совершенно разные веса специфичности к классам и идентификаторам. Фактически, идентификатор имеет бесконечно больше значений специфичности! То есть никакое количество классов само по себе не может перевесить ID.

Давайте посмотрим, как на самом деле вычисляются числа:

Другими словами:

• Если элемент имеет встроенный стиль, это автоматически ¹ выигрывает (1,0,0,0 балла)
• Для каждого значения идентификатора применяется 0,1,0,0 балла
• Для каждого значения класса (или псевдо -класс или селектор атрибутов) примените 0,0,1,0 балла
• Для каждой ссылки на элемент примените 0,0,0,1 балла

Обычно значения можно читать, как если бы они были просто числами, например 1,0,0,0 — это «1000», поэтому явно побеждает специфичность 0,1,0,0 или «100».Запятые нужны, чтобы напомнить нам, что это на самом деле не система «base 10», поскольку технически вы можете иметь значение специфичности, например 0,1,13,4 — и что «13» не распространяется на система с основанием 10 будет.

Примеры расчетов

Обновление: : not () sort-of-pseudo-class сам по себе не добавляет специфичности, только то, что находится внутри скобок, добавляется к значению специфичности.

Важные примечания

• Универсальный селектор (*) не имеет значения специфичности (0,0,0,0)
• Псевдоэлементы (например,грамм. : first-line) получают 0,0,0,1 в отличие от своих собратьев по псевдоклассу, которые получают 0,0,1,0
• Псевдокласс: not () сам по себе не добавляет никакой специфичности, а только то, что находится внутри круглых скобок.
• Значение ! Important , добавленное к значению свойства CSS, является автоматическим выигрышем . Он отменяет даже встроенные стили разметки. Единственный способ переопределить значение! Important — это другое правило! Important, объявленное позже в CSS, и с равным или большим значением специфичности в противном случае.Вы можете думать об этом как о добавлении 1,0,0,0,0 к значению специфичности.

Ресурсы

Специфика CSS

— Сообщество разработчиков

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

Понимание специфики CSS и ее использование в ваших интересах дает множество преимуществ.

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

Так легко просто присвоить своим стилям CSS значение ! Important , но это приводит к тому, что CSS быстро выходит из-под контроля.

Понимая, как применяются стили, вы можете обеспечить визуализацию тех стилей, которые вы хотите отобразить.

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

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

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

Нередко можно увидеть кодовую базу, пронизанную ! Важных переопределений . Хотя ! Important дает вам возможность сказать: «Забудьте все эти другие стили, я хочу, чтобы этот был применен !!!» это может вызвать серьезные проблемы, когда вам нужно обновить стиль, а вы не знаете, с чего начать.

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

На высоком уровне существует три сегмента специфичности вашего CSS:

• Универсальные селекторы, комбинаторы (>, + и т. Д.) И псевдоклассы отрицания : not () не влияют на специфичность CSS; стили, определенные внутри псевдокласса : not () do.
• Встроенные стили (стили, добавленные к элементу HTML) всегда переопределяют любые стили, объявленные во внешней таблице стилей; как правило, это не очень хорошая практика, так как лучше всего определять все стили в одном месте.
• ! Important отменяет все остальные обозначенные стили; это плохая практика, поскольку она может значительно усложнить отладку CSS. Когда два конфликтующих стиля используют объявление! Important, побеждает наиболее конкретный стиль.

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

Вы можете спросить себя: «Хорошо, специфичность CSS — это здорово, но как мне на самом деле определить, какой стиль наиболее специфичен?» Мы используем систему из четырех категорий, чтобы присвоить селектору CSS значение. Селектор с наиболее точным значением побеждает.

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

Разберем расчет специфики CSS.

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

У нас есть два стиля, которые меняют цвет элементов списка навигации при наведении курсора. Мы хотим изменить цвет второго элемента списка при наведении курсора на розовый. Но это работает не так, как ожидалось.

Чтобы изменить цвет второго элемента списка при наведении курсора на розовый, нам нужен более конкретный селектор CSS. Таким образом, добавление к селектору nav # nav или даже просто #nav выполнит свою работу.

Давайте вычислим CSS-специфичность фрагмента кода ниже.

CSS Specificity — это несложно, но это навык, который при изучении избавит вас от огромной боли и страданий.

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

Ознакомьтесь с ресурсами ниже, чтобы узнать больше о специфике CSS!

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

Калькулятор специфичности

Уловки CSS: специфичность

Специфика Звездные войны

Специфика CSS

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

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

Подкаст CSS — 003: Специфика

Предположим, вы работаете со следующими HTML и CSS:

   Привет, специфичность!   

  button {
 color: red; 
} 
.брендирование {
 цвет: синий; 
} 
  

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

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

Оценка специфичности #

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

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

Подсчет очков каждому типу селектора #

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

Универсальный селектор #

Универсальный селектор ( * ) имеет без специфичности и получает 0 баллов . Это означает, что любое правило с 1 или более баллами будет иметь приоритет над ним

  * {
 color: red; 
}  

Селектор элемента или псевдоэлемента #

Селектор элемента (типа) или псевдоэлемента получает 1 балл специфичности .

Селектор типа #

  div {
 цвет: красный; 
}  

Селектор псевдоэлементов #

  :: selection {
 color: red; 
}  

Селектор класса, псевдокласса или атрибута #

Селектор класса, псевдокласса или атрибута получает 10 точек специфичности .

Селектор класса #

  .my-class {
 цвет: красный; 
}  

Селектор псевдокласса #

 : hover {
 color: red; 
}  

Селектор атрибута #

  [href = '#'] {
 color: red; 
}  

Псевдокласс : not () сам по себе ничего не добавляет к вычислению специфичности.Однако селекторы, переданные в качестве аргументов, добавляются к вычислению специфичности.

  div: не (.my-class) {
 цвет: красный; 
}  

Этот образец будет иметь 11 точек специфичности, потому что он имеет один селектор типа ( div ) и один класс внутри : not () .

Селектор идентификатора #

Селектор идентификатора получает 100 точек специфичности , если вы используете селектор идентификатора ( #myID ), а не селектор атрибутов ( [id = "myID"] ).

  #myID {
 цвет: красный; 
}  

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

CSS, примененный непосредственно к атрибуту стиля элемента HTML, получает оценку специфичности в 1000 баллов . Это означает, что для того, чтобы переопределить его в CSS, вам нужно написать очень специфический селектор.

! Important rule #

Наконец, ! Important в конце значения CSS получает оценку специфичности 10 000 баллов .Это максимальная специфичность, которую может получить один отдельный предмет.

Правило ! Important применяется к свойству CSS, поэтому все в общем правиле (селектор и свойства) не получают одинаковой оценки специфичности.

  .my-class {
 цвет: красный! Важно; 
 фон: белый; 
}  

Какова оценка специфичности a [href = "#"] ?

1 5 11

a приносит 1 очко, а [href = "#"] дает 10 очков.

a приносит 1 балл, а [href = "#"] дает 10 баллов, что составляет 11 баллов .

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

Специфичность каждого селектора, соответствующего элементу, складывается. Рассмотрим этот пример HTML:

   Ссылка   

Эта ссылка имеет два класса. Добавьте следующий CSS, и он получит 1 балл специфичности :

  a {
 color: red; 
}  

Ссылка на один из классов в этом правиле, теперь он имеет 11 точек специфичности :

  a.мой-класс {
 цвет: зеленый; 
}  

Добавьте другой класс к селектору, теперь он имеет 21 точку специфичности :

  a.my-class.another-class {
 color: rebeccapurple; 
}  

Добавьте к селектору атрибут href , теперь он имеет 31 точку специфичности :

  a.my-class.another-class [href] {
 color: goldenrod; 
}  

Наконец, добавьте ко всему этому псевдокласс : hover , селектор получит 41 точку специфичности :

  a.my-class.another-class [href]: hover {
 color: светло-серый; 
}  

Какой из следующих селекторов дает 21 балл ?

article> section article.card.dark article: hover a [href]

Элементы приносят 1 балл, в селекторе есть 2 элемента, что дает 2 балла .

Элементы приносят 1 балл, классы приносят 10 баллов, а с 2 классами и 1 элементом, этот селектор дает 21 балл .

Элементы оцениваются в 1 балл, псевдоклассы и атрибуты оцениваются в 10 баллов, есть 2 балла за элементы и 20 баллов за атрибуты и классы, делает этот селектор равным 22 балла .

Визуализация специфичности #

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

Левая группа — это селекторы id . Вторая группа — это селекторы классов, атрибутов и псевдоклассов. Последняя группа — это селекторы элементов и псевдоэлементов.

Для справки, следующий селектор: 0-4-1 :

  a.my-class.another-class [href]: hover {
 color: lightgrey; 
}  

Какой из следующих селекторов — 1-2-1 ?

section # specialty.dark #specialty: hover li.dark [data-state-rad] .dark # specialty: hover li # speciality section.dark

Этот селектор отображается как 1-1 -1 .

Этот селектор отображается как 1-3-0 .

Этот селектор отображается как 1-1-2 .

Прагматически увеличивающая специфичность #

Допустим, у нас есть CSS, который выглядит так:

  .my-button {
 background: blue; 
} 
 кнопка [onclick] {
 фон: серый; 
} 
  

С HTML, который выглядит так:

   Щелкните меня   

Кнопка имеет серый фон, потому что второй селектор получает 11 баллов специфичности ( 0- 1-1 ).Это связано с тем, что у него есть один селектор типа ( кнопка, ), который равен 1 балл , и селектор атрибутов ( [onclick] ), который равен 10 точкам .

Предыдущее правило — .my-button — дает 10 точек ( 0-1-0 ), потому что оно имеет один селектор класса.

Если вы хотите усилить это правило, повторите селектор классов следующим образом:

  .my-button.my-button {
 background: blue; 
} 
 кнопка [onclick] {
 фон: серый; 
} 
  

Теперь кнопка будет иметь синий фон, потому что новый селектор получает оценку специфичности 20 баллов ( 0-2-0 ).

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

Соответствующая оценка специфичности определяет выигрыш новейшего экземпляра #

Давайте пока остановимся на примере кнопки и переключим CSS на это:

  .my-button {
 background: blue; 
} 
 [onclick] {
 фон: серый; 
} 
  

Кнопка имеет серый фон, потому что оба селектора имеют одинаковую оценку специфичности ( 0-1-0 ).

Если вы переключите правила в исходном порядке, кнопка станет синей.

  [onclick] {
 фон: серый; 
} 
 .my-button {
 фон: синий; 
} 
  

Это единственный случай, когда более новый CSS выигрывает. Для этого он должен соответствовать специфике другого селектора, нацеленного на тот же элемент.

Ресурсы #

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

Это может показаться не таким уж важным, и в большинстве случаев вы вообще не столкнетесь с какими-либо конфликтами, но чем больше и сложнее становятся ваши CSS-файлы или чем больше CSS-файлов вы начинаете жонглировать, тем выше вероятность возникновения конфликтов.

Более конкретный = более высокий приоритет

Если селекторы одинаковы, то всегда будет приоритет , последний, . Например, если у вас было:

 
п {цвет: красный}
п {цвет: синий}
  

Текст в поле элементов p будет окрашен в синий цвет, потому что это правило применяется последним.

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

 
div p {цвет: красный}
п {цвет: синий}
  

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

Рекламируйте здесь!
На давнем, начитанном и уважаемом ресурсе веб-разработки.

Расчет специфичности

Фактическая специфика группы вложенных селекторов требует некоторых вычислений. Каждому селектору идентификаторов («#whatever») можно присвоить значение 100 , каждому селектору класса («.whatever») значение 10 и каждому селектору HTML («что угодно») a значение 1 .Когда вы складываете их все, вы получаете значение специфичности.

• p имеет специфику 1 (1 селектор HTML)
• div p имеет специфику 2 (2 селектора HTML, 1 + 1)
• . Дерево имеет специфику 10 (1 селектор класса)
• div p.tree имеет специфичность 12 (2 селектора HTML + селектор класса, 1 + 1 + 10)
• #baobab имеет специфику 100 (1 селектор идентификатора)
• корпус # содержание.альтернатива p имеет специфичность 112 (селектор HTML + селектор идентификатора + селектор класса + селектор HTML, 1 + 100 + 10 + 1)

Итак, если использовать все эти примеры, div p.tree (со специфичностью 12) выиграет над div p (со специфичностью 2) и body #content .alternative p выиграет из них независимо от порядка .

Что такое специфика CSS и как она работает?

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

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

Чтобы продолжить наш пример выше, предположим, что вы добавляете свои селекторы CSS, нацеленные на все элементы a [href] и элементы a [href], которые содержат конкретно название вашего веб-сайта (это ваши внутренние ссылки). Вы определяете их соответственно с помощью свойств font-weight и font-color. Но когда вы переходите к предварительному просмотру изменений в интерфейсе вашего сайта, вы не видите правильного форматирования для своих внутренних ссылок. В чем дело?

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

В этом посте мы объясним, в чем заключается специфика CSS, а затем рассмотрим правила, чтобы вы могли правильно применить CSS в своем веб-проекте и избежать поиска ошибок в коде.

В чем специфика CSS?

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

Прежде чем мы рассмотрим различные правила специфичности CSS, давайте четко определим уровни специфичности каждого типа селектора CSS. Ниже представлена ​​так называемая «иерархия специфичности». Он начинается с типов селекторов от наивысшей до самой низкой.

1. Селекторы идентификаторов: Селекторы идентификаторов являются наиболее специфичными. Они выбирают элемент на основе его атрибута ID и имеют синтаксис #idname.
2. Селекторы классов, селекторы атрибутов и селекторы псевдоклассов:
   a) Селекторы классов выбирают все элементы в классе CSS и имеют имя синтаксиса .class.
   b) Селекторы атрибутов выбирают все элементы, которые имеют данный атрибут и имеют синтаксис [attr].
   c) Селекторы псевдокласса выбирают элементы только тогда, когда они находятся в особом состоянии, например посещенном или наведенном, и имеют селектор синтаксиса: псевдокласс.
   d) Эти три типа селекторов имеют одинаковую специфичность.
3. Селекторы типа : они выбирают все элементы HTML, которые имеют заданное имя узла и элемент синтаксиса.
4. Универсальные селекторы : Универсальный селектор (*) не влияет на специфичность.

Правила специфичности CSS

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

Правило 1. Применяется селектор CSS с более высокой специфичностью.

Если элемент HTML нацелен несколькими селекторами, браузер применит правило CSS селектора с более высокой специфичностью.

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

Давайте посмотрим на пример, демонстрирующий это правило ниже.

Скажем, например, вы хотите, чтобы элементы кнопки были темно-бордовыми на вашем сайте Bootstrap.Затем вы должны использовать селектор классов, чтобы определить все элементы в классе кнопки, чтобы они имели темно-бордовый цвет фона (шестнадцатеричный код цвета # 80000) и белый цвет шрифта (#FFFFFF). Но вы хотите, чтобы кнопка подписки на вашей домашней странице была исключением, чтобы она привлекала больше внимания. Затем вы можете использовать селектор идентификатора, чтобы определить одну кнопку с идентификатором «домашняя страница», чтобы иметь цвет фона фуксии (# FF00FF) и черный цвет шрифта (# 000000). Все кнопки Bootstrap без идентификатора «домашняя страница» по-прежнему будут следовать правилу CSS селектора классов.

Вот код CSS:

 
 
 
 
 #homepage {
 
 цвет фона: # FF00FF; 
 
 цвет: # 000000; 
 
} 
 
 .btn {
 
 цвет фона: # 800000; 
 
 цвет: #FFFFFF; 
 
} 
 
 
  

Вот HTML:

 
 
 
 
  Подписаться  
 
  Подписаться  
  

Вот результат:

Источник изображения

Правило 2: Если селекторы CSS имеют одинаковую специфичность, применяется последнее.

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

Давайте еще раз посмотрим на приведенный выше пример. Допустим, вы применили оба селектора к элементам кнопки Bootstrap, каждый с разными правилами для шрифта и цвета фона, но оба селектора были селекторами классов. Тогда будет применяться последнее.

Вот код CSS:

 
 
 
 
.btn {
 
 цвет фона: # FF00FF; 
 
 цвет: # 000000; 
 
} 
 
 .btn {
 
 цвет фона: # 800000; 
 
 цвет: #FFFFFF; 
 
} 
 
 
  

Вот HTML:

 
 
 
 
  Подписаться  
 
  Подписаться  
  

Вот результат:

Источник изображения

Правило 3: Встроенный CSS имеет наивысшую специфичность.

CSS

может быть написан тремя способами: встроенным, в разделе документа HTML или во внешней таблице стилей CSS. Встроенный стиль, также известный как «встроенная таблица стилей», имеет наивысшую специфичность и автоматически выигрывает.

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

Вот CSS из раздела:

 
 
 
 
.btn {
 
 цвет фона: # FF00FF; 
 
 цвет: #FFFFFF; 
 
} 
 
 
  

Вот HTML:

 
 
 
 
  Подписаться  
 
  Подписаться  
  

Вот результат:

Источник изображения

Как изменить специфичность CSS?

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

Несмотря на то, что у вас может возникнуть соблазн воспользоваться этим правилом, лучше следуйте многим другим правилам специфичности при объединении значений свойств, не делайте этого. Использование свойства! Important считается плохой практикой, поскольку оно нарушает естественное каскадирование таблиц стилей. Это значительно усложняет обслуживание и отладку вашего сайта, особенно если вы работаете с командой разработчиков.

Есть некоторые варианты использования, в которых можно использовать свойство! Important, например, когда вы определяете служебные классы, поэтому мы кратко рассмотрим пример ниже.

Допустим, вы хотите, чтобы любой элемент, на который нацелен класс кнопки, выглядел как та же кнопка. Затем вы примените уникальные свойства стиля с помощью селектора класса .btn. Пока все хорошо. В процессе создания вашей веб-страницы вы добавляете новый раздел с ID-именем «content», содержащий ссылку с классом кнопки. Вы также добавляете еще одно правило в свой CSS, определяя все элементы с идентификатором «content», чтобы они имели синюю границу с точками.

Теперь у вас есть два селектора, нацеленных на один и тот же элемент HTML.И, как мы знаем, поскольку селектор идентификатора имеет более высокую специфичность, чем селектор класса, стиль CSS селектора идентификатора имеет приоритет над стилем CSS селектора класса. Таким образом, у второго элемента будет синяя пунктирная рамка вместо сплошной черной. Чтобы избежать этого и гарантировать, что свойства стиля класса .btn применяются ко всем элементам под этим именем класса, независимо от типов или порядка селектора, вы можете добавить свойство! Important.

Вот код CSS:

 
 
 
 
.кнопка {
 
 фон: красный! Важный; 
 
 цвет: белый! Важно; 
 
 отступ: 3px! Important; 
 
 border-radius: 5px! Important; 
 
 граница: сплошной черный 1 пиксель! Important; 
 
} 
 
 #content a {
 
 граница: 1 пиксель синего цвета; 
 
} 
 
 
  

Вот HTML:

 
 
 
 
  Делай что-нибудь  
 
 <раздел> 
 
 
 текстовый текст blah  Делай что-нибудь