Урок с практикой по CSS (Онлайн курсы)
Выбрать другой урок из курса
Обсуждение
Теория урока

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

Наследование в CSS - механизм, с помощью которого передаются свойства от элемента к потомку.

В предыдущем курсе вы научились выбирать нужные элементы HTML. Рассмотрим пример 1.

Пример 1
body p { color: red; }
p { color: green; }

Как видно из примера, мы применяем к одному элементу то красный цвет, то зеленый. Ведь не может быть наш элемент и красным, и зеленым одновременно, значит, будет выполнено только одно правило из двух. И как же узнать, какого цвета будет элемент?

Здесь то и всплывает «специфичность». Для каждого правила браузер определяет специфичность элемента. Если для одного элемента применено несколько свойств, то используется то, которое имеет наибольшую специфичность.

Кратко о том, как определяется специфичность элемента.

  • Каждый псевдоэлемент или элемент добавляет к специфичности 0,0,0,1
  • Каждый атрибут, класс или псевдокласс добавит 0,0,1,0
  • Каждый идентификатор в селекторе добавит 0,1,0,0
  • Комбинаторы и универсальный селектор не учитывается

Смотрим наглядный пример. Пример два.

Пример 2
p {  } /* специфичность 0,0,0,1 */
body p { } /* специфичность 0,0,0,2 */
body #content p { } /* специфичность 0,1,0,2 */
body #content p:hover { } /* специфичность 0,1,1,2 */

<
×
>
Не публикуйте свой код прямо в комментариях. Во-первых, он плохо отображается. Во-вторых, он может содержать для кого-то «спойлеры», т.е. ответы на практику. Воспользуйтесь специальными сервисами: cssdeck.com или jsfiddle.net.
Комментарии, содержащие код (пару строк не считается), будут безжалостно удаляться.