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>