CSS Specificity
Что такое специфика?
При наличии двух или более конфликтующих правил CSS, которые указывают на один и тот же элемент, обозреватель следует некоторым правилам, чтобы определить, какой из них наиболее специфичен и, следовательно, выигрывает.
Подумайте о специфике как оценка/ранг, который определяет, какие объявления стиля в конечном итоге применяются к элементу.
Универсальный селектор (*) имеет низкую специфичность, а селекторы ID очень специфичны!
Примечание: Специфика является общей причиной, почему ваши CSS-правила не применяются к некоторым элементам, хотя вы думаете, что они должны.
Иерархия специфики
Каждый селектор имеет свое место в иерархии специфичности. Существует четыре категории, определяющие уровень специфичности селектора:
Встроенные стили — встроенный стиль присоединяется непосредственно к элементу для стиля. Пример: < стиль H1 = "цвет: #ffffff;" >.
IDS — идентификатор является уникальным идентификатором для элементов страницы, например #navbar.
Классы, атрибуты и псевдо-классы - эта категория включает классы, [атрибуты] и псевдо-классы, такие как: hover,: фокус и т.д.
Элементы и псевдо-элементы — эта категория включает имена элементов и псевдо-элементы, такие как H1, div,: before и: After.
Как рассчитать специфику?
Запомнить, как рассчитать специфику!
Начните с 0, добавьте 1000 для атрибута Style, добавьте 100 для каждого идентификатора, добавьте 10 для каждого атрибута, класса или псевдо-класса, добавьте 1 для каждого имени элемента или псевдо-элемента.
Рассмотрим эти три фрагмента кода:
Пример
A: h1
B: #content h1
C: <div id="content"><h1 style="color: #ffffff">Heading</h1></div>
Специфика A — 1 (один элемент)
Специфика B-101 (одна ссылка на идентификатор и один элемент)
Специфика C-1000 (встроенный стиль)
Начиная с 1 < 101 < 1000, третье правило (c) имеет больший уровень специфичности и поэтому будет применено.
Правила специфики
Равная специфичность: Последнее количество правил — если одно и то же правило дважды записывается во внешнюю таблицу стилей, то нижнее правило в таблице стилей ближе к элементу, который необходимо присвоить стилю, и поэтому будет применено:
Пример
h1 {background-color: yellow;}
h1 {background-color: red;}
Последнее правило применяется всегда.
Селекторы идентификаторов имеют более высокую специфичность, чем селекторы атрибутов -посмотрите на следующие три строки кода:
Пример
div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}
Первое правило более конкретное, чем два других, и будет применяться.
КонтеКстные селекторы более специфичны, чем выбор одного элемента- Внедренная таблица стилей ближе к элементу, который требуется присвоить стилю. Таким образом, в следующей ситуации
Пример
From external CSS file:
#content h1 {background-color: red;}
In HTML file:
<style>
#content h1 {
background-color:
yellow;
}
</style>
Последнее правило будет применяться.
Селектор класса превосходит любое количество селекторов элементов-Выбор класса, например. интро бьет H1, p, Div и т.д.:
Пример
.intro {background-color: yellow;}
h1 {background-color:
red;}
Универсальный селектор и унаследованные значения имеют специфичность 0 -*, Body * и аналогичные имеют нулевую специфичность. Унаследованные значения также имеют специфичность 0.