CSS: Каскадность

Каскадность — это особенность CSS, с помощью которой браузер определяет значения каких свойств будут применены к элементу при возникновении конфликта свойств. Конфликт свойств возникает, когда для элемента определено несколько правил, селекторы которых имеют одинаковую специфичность и они содержат одинаковые свойства, но с разными значениями.

Каскадность работает следующим образом: если в таблице стилей для одного элемента определено несколько правил, селекторы которых имеют одинаковую специфичность и они содержат конфликтующие свойства то, для элемента устанавливаются значения конфликтующих свойств того правила, которое расположено ниже в таблице стилей:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      p { color: yellow; }
      p { color: red; }
      p { color: green; } /* для элемента будет установлен зелёный цвет текста */
    </style>
  </head>
  <body>
    <p>Цвет текста абзаца зелёный.</p>
  </body>
</html>

Попробовать »

Если разные правила для одного элемента содержат свойства, которые не конфликтуют, то они объединяются в один стиль, т.е. каждое новое правило добавляет новую информацию о стиле к тому правилу, которое находится выше:

h1 {
  color: gray;
  font-family: sans-serif;
}

h1 { border-bottom: 1px solid black; }

Код, расположенный в примере выше, равносилен коду в примере ниже, в котором все три свойства указаны в одном правиле:

h1 {
  color: gray;
  font-family: sans-serif;
  border-bottom: 1px solid black;
}

Обычно дополнительные правила для элемента указываются в тех случаях, когда был задан один стиль сразу для нескольких элементов, но помимо этого необходимо добавить что-то ещё для определённого элемента:

h1, h2, h3 {  /* одинаковый стиль для трёх элементов */
  color: gray;
  font-family: sans-serif;
}
/* дополнительное правило для заголовков второго уровня */
h2 { border-bottom: 1px solid black; }

С этой темой смотрят: