CSS Специфичность
Что такое специфичность?
Определение
Специфичность - это способ, с помощью которого браузеры определяют, какие значения свойств CSS наиболее соответствуют элементу и, следовательно, будут применены. Специфичность основана на правилах соответствия, состоящих из селекторов CSS различных типов.
Если есть два или более конфликтующих правила CSS, указывающих на один и тот же элемент, браузер следует некоторым правилам, чтобы определить, какое из них наиболее конкретное, и поэтому побеждает.
Специфичность можно рассматривать как оценку/рейтинг, определяющий, какие объявления стиля в конечном итоге применяются к элементу.
Универсальный селектор (*) имеет низкую специфичность, в то время как селекторы ID очень специфичны!
Примечание: Специфичность - это частая причина, по которой ваши правила CSS не применяются к некоторым элементам, хотя вы думаете, что они должны применяться.
Иерархия специфичности
Каждый селектор имеет свое место в иерархии специфичности. Есть четыре категории, которые определяют уровень специфичности селектора:
Встроенные стили - Встроенный стиль прикрепляется непосредственно к стилизованному элементу. Пример: <h1 style="color: #fff;">.
IDs - ID - это уникальный идентификатор для элементов страницы, например #navbar.
Классы, атрибуты и псевдоклассы - В эту категорию входят .classes, [attributes] и псевдоклассы, такие как: hover, :focus и т.д.
Элементы и псевдоэлементы - В эту категорию входят имена элементов и псевдоэлементы, такие как h1, div, :before и :after.
Как рассчитать специфичность?
Запомните, как рассчитывать специфичность!
Начните с 0, добавьте 1000 для атрибута стиля, добавьте 100 для каждого идентификатора, добавьте 10 для каждого атрибута, класса или псевдокласса, добавьте 1 для каждого имени элемента или псевдоэлемента.
Рассмотрим эти три фрагмента кода:
Пример
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) имеет более высокий уровень специфичности и поэтому будет применяться.
Правила специфичности
Равная специфичность: учитывается последнее правило - если одно и то же правило дважды записано во внешнюю таблицу стилей, то нижнее правило в таблице стилей ближе к элементу, который нужно стилизовать, и поэтому будет применяться:
Последнее правило применяется всегда.
Селекторы идентификаторов имеют более высокую специфичность, чем селекторы атрибутов. Обратите внимание на следующие три строки кода:
Пример
div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}
Первое правило более конкретное, чем два других, и будет применяться.
Контекстные селекторы более специфичны, чем селектор одного элемента - встроенная таблица стилей ближе к элементу, который нужно стилизовать. Как в следующей ситуации:
Пример
Из внешнего CSS файла:
#content h1 {background-color: red;}
В HTML файле:
<style>
#content h1 {
background-color: yellow;
}
</style>
Последнее правило будет применяться.
Селектор класса превосходит любое количество селекторов элементов - селектор класса, такой как .intro, превосходит h1, p, div и т.д.:
Универсальный селектор и унаследованные значения имеют специфичность 0 - *, body * и подобные имеют нулевую специфичность. Унаследованные значения также имеют специфичность 0.
