Приоритет стилей
Приоритет стилей
При использовании CSS довольно часто можно наблюдать такую ситуацию, когда указанные стили почему-то не работают, хотя все написано без ошибок. Например, не изменяется размер шрифта, цвет ссылки или какие-то другие параметры HTML-элемента.
В таком случае можно говорить только об одном — где-то в таблице стилей уже существует селектор (возможно и не один) воздействующий на данный элемент и содержащий то же самое свойство CSS, которое у вас не хочет действовать. Этот селектор был создан вами ранее и возможно вы о нем забыли или не забыли, а просто не учли правила приоритетов стилей.
Вычисление приоритетов производится браузерами только в тех ситуациях, когда на один и тот же HTML-элемент воздействует несколько свойств CSS из вашей таблицы стилей, пытаясь у него изменить один и тот же параметр, например цвет рамки или текста. Те свойства, которые для данного элемента не дублируются, просто применяются к нему и все
Приоритеты стилей в зависимости от типа селектора
Селекторы CSS также влияют на стилевые приоритеты, причем в расчет берутся не только простые селекторы (классы, селекторы тегов, атрибуты и т.д.), но и составные (дочерние, соседние, селекторы потомков и т.д.).
Чтобы вычислить уровень приоритета (специфичности) какого-либо селектора браузеры используют определенный алгоритм, где каждому типу начисляется определенное количество баллов, определяющее вес селектора. Стили того селектора, который наберет больший вес, в конечном итоге и будут применены к элементу. Если же получится так, что какие-то селекторы, которые воздействуют на один и тот же HTML-элемент наберут одинаковое число баллов, то будут использованы стилевые свойства того, который находится в приемере ниже
Рассмотрим, каким же образом браузеры считают эти баллы:
- Универсальный селектор — количество начисляемых баллов равно нулю (0).
- Селекторы тегов и псевдоэлементы — по одному (1) баллу за каждый.
- Селекторы атрибутов, классы и псевдоклассы — по десять (10) баллов за каждый.
- Идентификаторы — по сто (100) баллов за каждый идентификатор находящийся в селекторе.
- Атрибут style — встроенные стили не используют селекторов, а указываются непосредственно внутри тегов элементов, но при этом они имеют самый высокий приоритет исчисляемый тысячей (1000) баллов.
Пример:
* { } /* 0 баллов */
em { } /* 1 балл */
p::first-letter { } /* 2 балла (один селектор тегов и один псевдоэлемент) */
p [title="Приветствие"] { } /* 11 баллов (по одному селектору тегов и атрибутов) */
div.fine .one { } /* 21 балл (два класса и один селектор тегов) */
#header a:hover { } /* 111 баллов (идентификатор, селектор тегов и псевдокласс) */
Пример демонстрирующий приоритеты селекторов
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Приоритеты селекторов</title>
<style type="text/css">
#content p {
color: black; /* черный цвет текста параграфов внутри id="content" */
}
.note {
color: green; /* зеленый цвет текста примечания */
border: 5px #c66 double; /* стили рамки примечания */
padding: 5px; /* внутренние отступы */
}
</style>
</head>
<body>
<div id="content">
<p>Обычный параграф.</p>
<p class="note">Примечание.</p>
</div>
</body>
</html>
Результат:
Приоритеты подключаемых и импортируемых стилей
Многие из вас уже давно догадались, что браузер считывает подключаемые стили по мере их появления в коде, то есть он сначала берет CSS из самого первого файла, затем ниже добавляет стили второго, еще ниже — третьего и так далее. Таким образом создается одна общая каскадная таблица стилей, в которой действуют такие же правила приоритетов, как и в обычной таблице состоящей из одного файла.
Давайте разберем пример импортируемых стилей, так сказать, для закрепления материала:
Содержимое файла style1.css
@import url("style/style2.css");
@import url("style/style3.css");
Ниже здесь идут стили самого файла style1.cssИтоговая таблица созданная браузером
Первыми идут стили из style2.css
Затем стили из style3.css
И в конце стили из style1.css
Итоговая таблица стилей с учетом приоритетов и что такое Каскад
Для получения итоговой таблицы стилей браузеры используют несколько этапов отбора, при котором учитывают приоритетные правила рассмотренные нами выше.
- Выбираются все стили подключенные к текущей странице с учетом типа устройства, на котором происходит просмотр.
- Делается еще одна сортировка, но уже по весу селекторов.
- Последняя сортировка, где вычисляются те свойства, которые, находясь в селекторах с одинаковым весом и влияя на один и тот же элемент, имеют дубли. Из них выбираются те, которые располагаются ниже в CSS-коде.
- Происходит отсеивание всех менее приоритетных дубликатов свойств и применение CSS к HTML-странице.
Заключение
Понимание приоритетов и каскадности в CSS является ключевым для успешного управления стилями веб-страницы. Учитывайте порядок, специфичность селекторов и правила наследования, чтобы эффективно решать проблемы с отображением стилей и создавать последовательные и чистые дизайны.
Будьте первым