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

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

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

Считайте специфичность (specificity) как оценку/ранг, которая определяет, какие стили будут применены к элементам в конечном итоге.

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

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

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

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

Внутренний стиль - Внутренние (внутренние) стили напрямую добавляются к элементам, для которых они настраивают стиль. Пример: <h1 style="color: #ffffff;">.

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

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

Элементы и pseudo-элементы - Эта категория включает имена элементов и pseudo-элементы, такие как h1, div, :before и :after.

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

Пожалуйста, запомните способ вычисления специфики!

Начинайте с 0, добавляйте 1000 для style атрибута, 100 для каждого ID, 10 для каждого свойства, класса или pseudo-класса, 1 для каждого элемента или pseudo-элемента.

Размышляйте о следующих трех фрагментах кода:

Пример

A: h1
B: #content h1
C: <div id="content"><h1 style="color: #ffffff">Heading</h1></div>
  • Специфика A составляет 1 (один элемент)
  • Специфика B составляет 101 (один ID и один элемент)
  • Специфика C составляет 1000 (внутренний стиль)

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

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

В случае одинаковой специфики: наиболее важным является newest rule - Если то же правило дважды写入 внешнюю таблицу стилей, то правило, написанное последним, будет ближе к элементу, для которого настраивается стиль, и поэтому будет применено:

Пример

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

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

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

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

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

Пример

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

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

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

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

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

Пример

Из внешнего CSS файла:

#content h1 {background-color: red;}

В HTML-файле:

<style>
#content h1 {
  background-color: yellow;
}
</style>

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

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

Классовый селектор побеждает любое количество селекторов элементов - Классовый селектор (например, .intro побеждает h1, p, div и т.д.):

Пример

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

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

Кроме того,Общий селектор и интегрированные значения имеют специфичность 0 - Специфичность * и body *, и аналогичные имеют специфичность 0. Специфичность интегрированных значений также равна 0.