Каскадирование в 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; 
}

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

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

Селекторы тегов имеют важность, оцениваемую в 1 балл;
Селекторы классов, атрибутов и псевдоклассов оцениваются в 10 баллов;
Селекторы идентификаторов оцениваются в 100 баллов;
Встроенные inline-стили (задаваемые через атрибут style) оцениваются в 1000 баллов.

Рассмотрим пример:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Каскадность стилей в CSS3</title>
        <style>
            #index {color: navy;}   /* темно-синий цвет текста */
            .redLink {color: red; font-size: 20px;} /* красный цвет текста и высота шрифта 20 пикселей */
            a {color: black; font-weight: bold;}    /* черный цвет текста и выделение жирным */
        </style>
    </head>
    <body>
        <a id="index" class="redLink" href="index.php">Основы CSS 3</a>
    </body>
</html>

Здесь к ссылке применяется сразу три стиля. Эти стили содержат два не конфликтующих правила:

font-size: 20px;
font-weight: bold;

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

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

#index {color: navy;}

!important

CSS предоставляет возможность полностью отменить значимость стилей. Для этого в конце стиля указывается значение !important:

a {
   font-size: 18px; color: red !important;
}

#menu a {
   color: navy;
}

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