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

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

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

body p { color: red; }
p { color: green; }

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

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

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

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

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

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 */

Похожие уроки Codebra

1. Нет практики в этом уроке по CSS.

– Не пропускайте новостей, подпишитесь на нашу страницу ВКонтакте, Telegram.

– На данный момент на сайте нет возможности оставлять комментарии, но Вы можете спросить в нашей Telegram-группе.