Внимание! На этой странице вы найдете материал урока из архивного курса по CSS. Курс был написан в 2015 и по-прежнему актуален для начинающих веб-разработчиков.
Теоретический материал сохранен в исходном виде, а практические задания с автоматической проверкой вынесены в отдельные роадмапы.
Полный список уроков доступен по тегу Архивный курс по 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 по тегу CSS.
