HTML/CSS: Приоритет стилей

• Приоритеты селекторов

Говоря о каскадности, возникает вопрос: «А что произойдёт, если в разных источниках будут одинаковые правила для элемента, но с разными значениями?». В таком случае есть правила, определяющие приоритеты стилей из разных источников. По степени важности список выглядит следующим образом:

• Стили в атрибуте тега
• Стили в отдельном файле
• Стили по умолчанию, которые добавляет браузер

Значения, указанные в атрибуте style будут важнее свойств в теге <style>, а они будут важнее стандартных стилей браузера.

Приоритеты селекторов

Важной чертой CSS является то, что разные типы селекторов имеют разный приоритет. Если стили противоречат друг другу в разных селекторах, то вступает в дело принцип приоритета.

Разберём на примере. Создадим параграф с классом red и идентификатором blue

<p id="blue" class="red">Текст с классом red и идентификатором blue</p>

Добавим противоречащие друг другу стили для класса, идентификатора и тега:

p {
  color: black;
}

.red {
  color: red;
}

#blue {
  color: blue;
}

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

У селекторов также существуют приоритеты. Условно можно расставить селекторы в следующем порядке по приоритету:

1. Селектор по идентификатору (#blue)
2. Селектор по классу (.red)
3. Селектор по тегу (p)

Где 1 — самый высокий приоритет, а 3 — самый низкий.

По этим правилам можно понять, что свойства указанные в селекторе по идентификатору будет обладать большим приоритетом, чем стили у селектора по тегу и классу. Поэтому параграф в прошлом примере был синим.

Это легко запомнить, если селекторы небольшие, но они могут быть сложнее. В качестве селектора может быть комбинация классов, тегов и так далее. Например:

<p class="paragraph color-primary">Параграф</p>

.paragraph.color-primary {
  color: blue;
}

Здесь использовался селектор из двух классов сразу. Это означает, что стили будет применяться только для элемента, у которого есть оба класса. Такое разделение помогает разработчикам точечно устанавливать стили для схожих элементов. Например:

<p class="paragraph color-primary">Параграф</p>
<p class="paragraph">Параграф</p>
<p class="paragraph color-primary">Параграф</p>

.paragraph {
  color: red;
}

.paragraph.color-primary {
  color: blue;
}

В этом примере все параграфы с классом paragraph будут иметь красный цвет текста, но если дополнительно установлен класс color-primary, то цвет будет голубой. Почему так происходит? У таких селекторов также есть свои приоритеты. В сложных селекторах считается количество вхождений тех или иных селекторов и считается суммарный вес.

Для определения приоритета можно использовать следующие правила, где каждому селектору задаётся его «вес»:

• Селектор по тегу: 1
• Селектор по классу: 10
• Селектор по ID: 100
• Стиль в атрибуте тега: 1000

Чтобы узнать, какой селектор будет иметь больший вес, нужно сложить все полученные значения. Например:

• Селектор .paragraph состоит из одного класса, а значит его вес — 10
• Селектор .paragraph.color-primary состоит из двух классов. Его вес — 20

Таким образом свойства у селектора .paragraph.color-primary будут иметь больший приоритет, чем внутри селектора .paragraph.

Вышеприведённый список для вычисления «весов» или, как ещё говорят, «специфичности свойств» не является абсолютно полным, но этого способа достаточно на первых этапах изучения CSS. С практикой вы научитесь самостоятельно определять приоритет селекторов.

Задание

Добавьте в редактор параграф с классом border и id no-border. Установите следующие правила:

• Для класса border установите сплошную рамку любого цвета толщиной 1px. Это можно сделать так: border: 1px solid #000;
• Для id no-border отмените рамку. Используйте значение none у правила border-style

Первым укажите стили для селектора .border, вторым селектор #no-border

Стили запишите в теге <style>