Ієрархія селекторів

Групування

Коми, які поділяють селектори, дозволяють «розділяти» декларації між селекторами. Правило, яке продемонстровано нижче, вказує, що всі елементи i, елементи класу “warning” і елементи з ідентифікатором id “important” будуть підкреслені.

i, .warning, #important {
 text-decoration: underline;
}

Якщо правила конфліктують:

Правило з більш специфічним селектором йде першим
Якщо два селектора мають однаковий рівень специфічності, правило, яке вказано пізніше в документі, йде першим

Як визначається специфічність селектора

Припустимо, ваші селектори об’єднані в наступному порядку і ті, що нагорі мають найвищий рівень специфічності

Декларації в атрибутах стилю йдуть без селектора і володіють найвищим пріоритетом
Селектори з атрибутом ідентифікатора id (наприклад, h1 # foo {}) є наступними по важливості в ієрархії
Селектори з іншими атрибутами (наприклад, h1.foo і a [target]) або псевдокласи (наприклад, a: hover) розміщуються наступними в ієрархії найбільш важливих
Селектори без інших атрибутів крім імені елемента (наприклад, h1) займають наступну сходинку в ієрархії найбільш важливих
Універсальний селектор (*) володіє найменшим пріоритетом

Для коректного визначення точного значення специфічності, пройдіть наступний процес:

Почніть зі значення 0.0.0.0
Якщо ви знайдете декларацію в атрибуті стилю, ви повинні змінити першу цифру на 1, що дасть вам 1.0.0.0. Тоді ви отримуєте найвище значення специфічності і необхідності в подальших розрахунках немає
Кожного разу, коли настає умова 2, додайте 1 до другої цифри. Наприклад, для ol # foo li # bar додайте 2 (1 за кожний id), що дає вам 0.2.0.0
Кожного разу як ви стикаєтеся з третім випадком, додайте одиницю до третьої цифри. Наприклад, для ol # foo li # bar a [target] додайте 1, що дає вам 0.2.1.0.
Кожного разу, коли виконується умова 4, додайте 1 до четвертої цифрі. Наприклад, для ol # foo li # bar a [target] додайте 3 (по одному за кожне ім’я елемента), що дає нам 0.2.1.3

Коли ви порівнюєте специфічність двох селекторів, почніть з найбільших цифр ліворуч. Число, яке більше іншого, буде більш специфічним. Якщо вони рівні, йдіть далі і порівнюйте наступні цифри.

Каскад

Правила стилю можуть визначатися веб-дизайнерами в трьох різних місцях:

У запровадженому стилі
У зовнішній таблиці стилів (на яку посилається HTML-файл або яка імпортується)
У рядку елемента

Впроваджені таблиці стилів

Впроваджені таблиці стилів можуть бути виявлені в елементі стилю у верхній частині HTML-сторінки. Наступний код демонструє приклад сторінки з вбудованою таблицею стилів:

Приклад коду

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Embedded Style Sheet</title>
<style type="text/css">
.warning {color:#ff0000}
h1.warning {text-decoration:underline}
p.warning {font-weight:bold}
</style>
</head>
<body>
<h1 class="warning">WARNING</h1>
<p class="warning">Don't go there!</p>
</body>
</html>

Ієрархія селекторів

Групування