CSS Особенности
В чем особенности?
Если есть два или более конфликтующих правила CSS, которые указывают на тот же элемент, браузер следует некоторым правилам, чтобы определить, какой из них самый конкретный и поэтому он применяться.
Подумайте о специфике как о балле / ранге, который определяет, какие объявления стиля в конечном итоге применяются к элементу.
Всеобщий селектор (* имеет низкую характерность,
а id селекторы высокую конкретность!
Примечание: Особенность - это распространенная причина, почему ваши CSS правила не применяются к некоторым элементам, хотя вы думаете, что они должны применяться.
Иерархия особенности
Каждый селектор имеет свое место в иерархии. Есть четыре категории, определяющие уровень особенности селектора:
Встроенный стиль - Встроенный стиль прикрепляется непосредственно к элементу, для которого создается стиль.
Пример: <h1 style="color: #ffffff;">.
Идентификатор - это уникальный идентификатор элементов страницы, таких как, #navbar.
Классы, атрибуты и псевдо-классы - Эти категории включают .класс [атрибут]
и псевдо-классы как например :hover, :focus и т.д..
Элементы и псевдо-элементы - Эта категория включает элемент имена и псевдо-элементы,
как например h1, div , :before и :after .
Как рассчитать особенности?
Запомните, как рассчитать особенности!
Начните с 0, добавьте 1000 атрибутов для стиля, добавить 100 для каждого идентификатора, добавить 10 для каждого атрибута класса или псевдокласс, добавьте 1 для каждого имени элемента или псевдо-элемента.
Рассмотрим следующие три фрагмента кода:
Пример
A: h1
B: #content h1
C: <div id="content"><h1 style="color: #ffffff">Заголовок</h1></div>
Особенность A - 1 (один элемент)
Особенность Б - 101 (одна ссылка ID и один элемент)
Особенность C - 1000 (встроенный стиль)
Так как 1 < 101 < 1000, третье правило (C) имеет более высокий уровень специфичность, а значит будет применяться
Правила особенности
Равная особенность: последним пунктам правил - Если одно и то же правило записывается дважды во внешнюю таблицу стилей, то нижнее правило в таблице стилей ближе к элементу, будет применяться, и поэтому оно будет работать:
Последнее правило применяется всегда.
ID селекторы имеют более высокую специфичность, чем селекторы атрибутов - Посмотрите на следующие три строки кода:
Пример
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.
