что такое специфичность css селекторов и как она работает
CSS Специфичность
Что такое специфичность?
Определение
Если есть два или более конфликтующих правила CSS, указывающих на один и тот же элемент, браузер следует некоторым правилам, чтобы определить, какое из них наиболее конкретное, и поэтому побеждает.
Специфичность можно рассматривать как оценку/рейтинг, определяющий, какие объявления стиля в конечном итоге применяются к элементу.
Универсальный селектор (*) имеет низкую специфичность, в то время как селекторы ID очень специфичны!
Иерархия специфичности
Каждый селектор имеет свое место в иерархии специфичности. Есть четыре категории, которые определяют уровень специфичности селектора:
Как рассчитать специфичность?
Запомните, как рассчитывать специфичность!
Начните с 0, добавьте 1000 для атрибута стиля, добавьте 100 для каждого идентификатора, добавьте 10 для каждого атрибута, класса или псевдокласса, добавьте 1 для каждого имени элемента или псевдоэлемента.
Рассмотрим эти три фрагмента кода:
Пример
Heading
Специфичность A равна 1 (один элемент)
Специфичность B равна 101 (одна ссылка ID и один элемент)
Специфичность C составляет 1000 (встроенный стиль)
Правила специфичности
Пример
Последнее правило применяется всегда.
Селекторы идентификаторов имеют более высокую специфичность, чем селекторы атрибутов. Обратите внимание на следующие три строки кода:
Пример
Первое правило более конкретное, чем два других, и будет применяться.
Пример
В HTML файле:
Последнее правило будет применяться.
Пример
Специфичность
Определение
Специфичность представляет собой вес, придаваемый конкретному правилу CSS. Вес правила определяется количеством каждого из типов селекторов в данном правиле. Если у нескольких правил специфичность одинакова, то к элементу применяется последнее по порядку правило CSS. Специфичность имеет значение только в том случае, если один элемент соответствует нескольким правилам. Согласно спецификации CSS, правило для непосредственно соответствующего элемента всегда будет иметь больший приоритет, чем правила, унаследованные от предка.
Типы селекторов
В следующем списке типы селекторов расположены по возрастанию специфичности:
Стили, объявленные в элементе (например, style=»font-weight:bold» ), всегда переопределяют любые правила из внешних файлов стилей и, таким образом, их специфичность можно считать наивысшей.
Несколько практических советов:
Использовать более специфичные правила. Чтобы сделать правило более специфичным и повысить его приоритет, укажите один элемент или несколько перед нужным вам элементом:
Вне зависимости от порядка следования правил, текст всегда будет зелёным, поскольку у этого правила наибольшая специфичность (при этом, правило для голубого цвета имеет преимущество перед правилом для красного, несмотря на порядок следования).
Пример из практики: Некоторые плохо написанные плагины jQuery, использующие присваивание стилей самим элементам.
Пример большей специфичности:
С более подробной информацией можно ознакомиться по следующим ссылкам:
. отобразится на экране так:
Это текст в div.inner
Специфичность основана на форме
Специфичность опирается на форму селектора. В следующем примере, при определении специфичности селектора, селектор *[id=»foo»] считается селектором атрибута, даже при том, что ищет идентификатор.
. в результате выглядят так:
Потому что оба правила соответствуют одному и тому же элементу, но селектор идентификатора имеет большую специфичность.
Независимость от расположения
Потому что, хотя оба объявления имеют одинаковое количество типов селекторов, но селектор html h1 объявлен последним.
Непосредственно соответствующие элементы и унаследованные стили
. тоже отобразится как:
Потому что селектор h1 непосредственно соответствует элементу, а стиль, задающий зелёный цвет, всего лишь унаследован от родителя.
Основы CSS. Часть 2. Комбинации селекторов, наследование, каскадирование и специфичность
В прошлой статье мы разобрали что такое CSS, как подключать стили к HTML страницам, поговорили о синтаксисе CSS-правил, и познакомились с многообразием CSS-селекторов.
В этой статье разберем немного более сложные вещи.
Предположим, есть страница на сайте, где слева размещены статьи, а справа, в боковой колонке идет новостная лента. Ниже псевдоразметка, чтобы было понятно, о чем идет речь.
Заголовок статьи 1
Заголовок статьи 2
Заголовок новости 1
Заголовок новости 2
Для заголовков и статей, и новостей, используются теги
. Мы можем отформатировать эти заголовки, используя селектор элемента, например:
Cтоит задача, что заголовки статей должны быть по центру, а заголовки новостей надо сделать темно-красного цвета.
Мы можем написать отдельные классы для заголовков статей и заголовков новостей, и в этом классе прописать нужные нам свойства.
Но тогда нам придется эти классы указать в разметке для каждого тега
как в статьях, так и в новостях, да и в целом количество классов увеличится. Однако известный философский принцип «Не следует множить сущности без необходимости» актуален везде, в том числе и программировании.
Мы можем поступить красивее, а именно использовать комбинации селекторов.
Комбинации селекторов.
Селекторы можно комбинировать друг с другом используя, так называемые комбинаторы.
В задачу, описанную выше, мы можем решить, написав два правила.
Для заголовков статей:
Для заголовков новостей:
Этот комбинатор называется «комбинатор потомков» и используется очень часто.
Дочерний селектор
Давайте немного изменим верстку блока со статьями.
Заголовок статьи 1
Заголовок статьи 2
Рекламная акция
Заголовок статьи 3
Заголовок статьи 4
Комбинатор всех соседних элементов
выберет все соседние элементы, т.е. элементы у которых такой же контейнер, как и у указанного элемента. Слово «соседний» в данном случае обозначает, что будут выбраны все элементы находящиеся после указанного.
Заголовок статьи 1
Заголовок статьи 2
Рекламная акция
Заголовок статьи 3
Заголовок статьи 4
В примере выше все заголовки
Комбинатор следующего соседнего элемента
Комбинатор + позволяет выбрать элемент, который находится сразу после указанного элемента. При этом, конечно, у них должен быть общий контейнер.
Комбинатор запятая
Комбинатор, позволяет сгруппировать селекторы, т.е. задать несколько селекторов для одного правила.
В примере выше, мы обнуляем отступы снизу сразу у всех заголовков.
Наследование
Для сокращения количества правил в CSS имеется механизм наследования.
Наследование – это механизм, когда определенные в контейнере свойства, автоматически назначаются вложенным в этот контейнер элементам.
Для примера, рассмотрим правило:
Описанное выше поведение очень удобно, иначе вам бы пришлось, для всех элементов, прописывать цвет текста вручную.
В самом деле, представьте если бы наследовалась, скажем, граница – верстка бы сильно усложнилась.
Каскадность и специфичность
Напомню, что CSS в переводе – это «Каскадные таблицы стилей», уже одно это показывает важность понятия «каскадность».
В верстке самой распространенной является ситуация, когда на один элемент действуют множество CSS-правил. И то, как именно будет выглядеть элемент определяют именно каскадность и специфичность.
Каскадность
Каскадность – это механизм CSS, который определяет какие стили в итоге будут применены к элементу.
Посмотрите на пример:
Заголовок третьего уровня
Видим, что для данного элемента имеются 3 правила. Итоговыми стилями, примененными к элементу, будут:
С каскадностью теснейшим образом связана специфичность.
Дело в том, что одни и те же свойства, для одного и того же элемента, могут быть определены в разных css-правилах, и даже, в разных файлах.
Какое же значение у свойства будет в итоге? Это определяется через механизм, называемый специфичность.
Специфичность
Заголовок новости
Вопрос: «Какой цвет будет у этого элемента?»
Специфичность (вес) селектора определяется при помощи 4-х различных значений. Эти значения можно, условно, представить как цифры: тысячи, сотни, десятки, единицы.
Если не очень понятно, то посмотрите таблицу ниже и все станет ясно:
