Каскад и специфичность

Часто на один элемент действуют сразу несколько правил, и они спорят друг с другом: одно делает текст серым, другое — красным. Браузер решает такие споры по чётким правилам. Этот механизм и дал CSS название: каскад — порядок, по которому стили «стекают» на элементы.

Порядок правил

Если два правила с одинаковыми селекторами задают одно свойство, побеждает то, что написано ниже:

<style>
  p { color: royalblue; }
  p { color: crimson; }
</style>
 
<p>Текст красный: второе правило ниже.</p>

Свойства, о которых правила не спорят, складываются: если первое задаёт цвет, а второе — размер, элемент получит и то и другое.

Специфичность

Когда селекторы разные, важнее порядка их специфичность — точность. Селектор id точнее класса, класс точнее тега:

<style>
  .warning { color: crimson; }
  p { color: gray; }
</style>
 
<p class="warning">Класс сильнее тега — текст красный, хотя правило для p ниже.</p>

Как сравнивать селекторы

Специфичность считают тремя числами: сколько в селекторе id, сколько классов, сколько тегов. Сравнивают слева направо, как номера версий. .card p — это 0 id, 1 класс, 1 тег, а p — 0, 0, 1, поэтому первый сильнее:

<style>
  .card p { color: seagreen; }
  p { color: gray; }
</style>
 
<div class="card">
  <p>Внутри карточки — зелёный.</p>
</div>
<p>Вне карточки — серый.</p>

Наследование

Некоторые свойства наследуются: если задать их родителю, они перейдут ко всем элементам внутри. Так ведут себя свойства текста — color, font-family, font-size, line-height:

<style>
  .article {
    color: darkslateblue;
    border: 2px solid gold;
  }
</style>
 
<div class="article">
  <p>Абзац унаследовал цвет, но не рамку.</p>
</div>

Рамки, отступы и фон не наследуются — иначе рамка появилась бы у каждого вложенного элемента.

Унаследованное значение слабее любого правила

Значение, полученное от родителя, проигрывает даже самому слабому правилу для самого элемента:

<style>
  #box { color: crimson; }
  a { color: seagreen; }
</style>
 
<div id="box">
  Текст красный, а <a href="#">ссылка</a> — зелёная.
</div>

Селектор #box сильный, но он относится к div. Для ссылки есть своё правило a, и оно побеждает унаследованный цвет.

Частая ошибка

Слово !important после значения перебивает любые селекторы. Кажется, что это быстрое решение, но следующее изменение потребует ещё одного !important, и стили превратятся в гонку. Лучше найти, какой селектор мешает, и сделать свой точнее:

<style>
  .card p { color: gray; }
  .card .price { color: seagreen; }
</style>
 
<div class="card">
  <p>Описание товара</p>
  <p class="price">$25</p>
</div>

.card .price (два класса) сильнее, чем .card p (класс и тег), поэтому цена зелёная без всякого !important.