Содержание страницы
домикГлавная / Элементы html и css / Приоритет в css
приоритет в cssДовольно часто у новичков при изменении и добавлении стилевых значений происходит ошибка, возникшая по причине отсутствия понятия об приоритетах в css. Сколько бы они не пытались внедрить новшество в своём дизайне html при помощи css, у них ничего не получается.

А это легко поправимо, и сейчас на примерах я поясню, что существуют приоритеты в css, которые нужно обязательно учитывать.
Возьмём банальный пример: у нас в html документе есть блок с классом ( родитель ) и в нём лежит параграф с классом ( его потомок ). Изначально для всех параграфов в css был указан красный цвет, и в коде html это выглядит так:
html и cssCOPY
<style> p { color: red; } </style> <div class="row"> <p class="van">Текстовый параграф</p> </div>
Допустим, у нас возникла ситуация, и нам нужно параграф с классом van сделать синим цветом. Для этой цели нам необходимо переопределить уже имеющееся значения для всех параграфов и прописать этот код:
html и cssCOPY
<style> p { color: red; } .van { color: blue; } </style> <div class="row"> <p class="van">Текстовый параграф</p> </div>
Как вы начинаете понимать, приоритет в css для тега с указанием класса имеет степень выше, нежели с простым тегом.

А теперь представим, что у нас 2 таких параграфа с одним и тем же классом van, только один расположен ( как в примере ) в блоке с классом row, а другой в совершенно другом блоке. И наша задача придать зелёный цвет только тому параграфу, у которого родитель блок с классом row.
Для этого воплощения пропишем уже так:
html и cssCOPY
<style> p { color: red; } .van { color: blue; } .row .van { color: green; } </style> <div class="row"> <p class="van">Текстовый параграф</p> </div>
В этом примере приоритетом в css будет запись .row .van {...} не потому что она прописана последней, а потому что в этой записи указан родитель параграфа.

Запомните!
Чем больше предков указано в записи css ( дерево родителей ), тем она будет более приоритетней.

!important

При добавлении к записи значение !important её приоритет станет самым высоким независимо от указаниия предков и независимо от её местоположения ( в самом низу эта зпись сделана или в самом верху ).
Старайтесь использовать это дополнение к записи css только в исключительных случаях.

Для примера, я дполню запись в css для нашего параграфа значением !important и все параграфы примут красный цвет независимо от тех записей, которые сделаны ниже и якобы должны иметь приоритет выше.
html и cssCOPY
<style> p { color: red !important; } .van { color: blue; } .row .van { color: green; } </style> <div class="row"> <p class="van">Текстовый параграф</p> </div>

Вывод:

  • 1. - Перед тем, как переопределить любой объект в css, внимательно посмотрите уже прописанный для этого элемента код;
  • 2. - Новая ваша запись должна быть прописана ниже оригинальной записи и должна иметь приоритет по родителю не ниже уже прописанного.
Дата публикации: 20.05.2019
Комментарии
Добавить комментарий
Комментарий не отправлен!
Комментарий успешно отправлен!
После модерации он будет опубликован!
Имя - только русские буквы!
Это обязательное поле!