Урок с практикой по 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 */

<
×
>
Внимание! Впервые на этом сайте?

Образовательный ресурс codebra.ru полностью посвящен программированию. Все курсы и уроки находятся на главной странице. Вы можете начать изучение прямо сейчас, кликнув на ссылки: HTML, CSS, JavaScript, C++, PHP, jQuery, Python, Bootstrap 3

Если что-то не нашли, то воспользуйтесь поиском по сайту, который находится на главной странице в самом верху.

Удачи в обучении!

Закрыть окно