Специфичность свойств.

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

Например если есть несколько одинаковых CSS селекторов, то селектор, декларированный позднее других, имеет более высокий приоритет:

p {
   color: red;
}

p {
   color: blue;
}

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

Декларировать одинаковые селекторы с конфликтующими правилами смысла нету. Тем не менее, законная территория конфликтов – это вложенные селекторы. Например, возьмем следующий пример:

div p {
   color: red;
}

p {
   color: blue;
}

В данном примере элементы <p> внутри элемента <div> должны быть окрашены в синий цвет, так как декларация цвета для элементов <p> появляется последней. Но, такие элементы будут окрашены в красный цвет в соответствии с правилом первого селектора. Это происходит из-за того, что чем специфичнее селектор, тем больший приоритет он имеет.

В статье “Каскадирование в CSS” я рассказывал что каждому селектору идентификатора присваивается значение 100, каждому селектору класса – значение 10 и каждому HTML селектору – значение 1. Затем происходит сложение значений вложенных селекторов:

  • p – специфичность 1 (1 селектор имени);
  • div p – специфичность 2 (2 селектора имени; 1+1);
  • .doo – специфичность 10 (1 селектор класса);
  • div p.doo – специфичность 12 (2 селектора имени и селектор класса; 1+1+10);
  • #primer – специфичность 100 (1 селектор идентификатора);
  • body #primer .black p – специфичность 112 (селектор имени, селектор идентификатора, селектор класса, селектор имени; 1+100+10+1).

Таким образом, если бы все эти селекторы были бы определены, то div p.doo (со специфичностью 12) перекрыл бы селектор div p (со специфичностью 2), а селектор body #primer .black p перекрыл бы всех их не зависимо от порядка декларирования.

 
Поделиться в facebook
Facebook
Поделиться в twitter
Twitter
Поделиться в vk
VK
Поделиться в google
Google+
Поделиться в email
Email

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Группа в VK

Помощь проекту

Обнаружили опечатку?

Сообщите нам об этом, выделите текст с ошибкой и нажмите Ctrl+Enter, будем очень признательны!

Свежие статьи

Похожие статьи

CSS flexbox

CSS flexbox

CSS flexbox (Flexible Box Layout Module) — модуль макета гибкого контейнера — представляет собой способ компоновки элементов, в основе лежит идея оси. Flexbox состоит из

 
Препроцессор Sass

Препроцессор Sass

Sass — это метаязык на основе CSS, предназначенный для увеличения уровня абстракции CSS-кода и упрощения файлов каскадных таблиц стилей. Язык Sass имеет два синтаксиса: sass

 
Программируемый язык стилей LESS

Программируемый язык стилей LESS

LESS (Leaner Style Sheets, компактная таблица стилей) — это динамический язык стилей, который разработал Alexis Sellier. Он создан под влиянием языка стилей Sass, и, в

 
CSS-фреймворки

CSS-фреймворки

CSS-фреймворки созданы для упрощения работы верстальщика, исключения ошибок при создании проекта и избавления от скучного монотонного написания одного и того же кода. Верстальщики получают продуманные

 

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: