CSS расшифровывается как Cascading Style Sheets — каскадные таблицы стилей. Слово «каскадные» означает, что стили применяются по определённым правилам приоритета. Понять эти правила — значит перестать удивляться, почему стиль не применяется.
Три источника стилей
Браузер собирает стили из трёх источников в порядке возрастания приоритета:
- Стили браузера (user agent stylesheet) — умолчания:
<h1>крупный,<a>синий. - Ваши стили (author stylesheet) — то, что пишете вы.
- Инлайновые стили (
style="") — высший приоритет среди обычных стилей.
Специфичность: формула
Когда два правила нацелены на один элемент, побеждает более специфичное. Специфичность записывается тройкой (a, b, c):
| Тип | Вклад | Пример |
|---|---|---|
ID (#) |
a = 1 | #header → (1,0,0) |
Класс (.), псевдокласс, атрибут |
b = 1 | .card → (0,1,0) |
| Тег, псевдоэлемент | c = 1 | h1 → (0,0,1) |
Каждый тип считается независимо. Сравниваются слева направо.
Примеры подсчёта
p { color: black; } /* (0,0,1) */
.post-text { color: gray; } /* (0,1,0) */
#main p { color: blue; } /* (1,0,1) */
.post .text p { color: green; } /* (0,2,1) */
Для <p class="post-text"> внутри <div id="main">:
- p → (0,0,1)
- .post-text → (0,1,0)
- #main p → (1,0,1) ← победитель (первое число больше)
Порядок объявления: при равной специфичности
Если два правила имеют одинаковую специфичность — побеждает то, что объявлено позже.
.btn { background: #2563eb; } /* объявлено раньше */
.btn { background: #1d4ed8; } /* объявлено позже — победит */
Это важно при подключении нескольких CSS-файлов: порядок <link> имеет значение.
Наследование
Некоторые свойства наследуются от родителя к потомку автоматически:
body {
font-family: 'Inter', sans-serif;
color: #374151;
line-height: 1.6;
}
Все элементы внутри <body> унаследуют font-family, color, line-height — не нужно повторять их для каждого тега.
Наследуемые свойства: color, font-*, line-height, text-align, list-style, cursor.
НЕ наследуются: width, height, padding, margin, border, background, display.
!important — крайняя мера
.btn {
color: white !important;
}
!important переопределяет любую специфичность. Выглядит как решение, но создаёт проблемы:
- Правило становится трудно переопределить позже
- Если
!importantвстречается часто — код становится хаотичным - Признак того, что структура CSS плохо продумана
Когда оправдано: переопределение стилей сторонних библиотек, которые тоже используют !important.
В DevBlog избегайте !important. Лучше повысьте специфичность другим способом.
Практика: отладка каскада в DevTools
Откройте DevTools (F12), выберите элемент, вкладка Styles:
- Зачёркнутые свойства — переопределены другим правилом
- Браузер показывает, какой именно селектор победил и из какого файла
Типичные ошибки
Стиль не применяется — низкая специфичность
/* Написали так */
a { color: #2563eb; }
/* Но в reset.css есть */
nav a { color: inherit; } /* (0,1,1) > (0,0,1) — победит reset */
Решение: повысьте специфичность вашего правила.
.site-nav a { color: #2563eb; } /* (0,1,1) — равно, но позже */
Порядок файлов
<!-- Сначала ваши стили, потом библиотека — библиотека перебьёт вас -->
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="bootstrap.min.css">
<!-- Правильно: сначала библиотека, потом ваши -->
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="style.css">
Итог: порядок приоритетов
От низшего к высшему:
- Стили браузера по умолчанию
- Внешний CSS (по порядку подключения, затем по специфичности)
- Инлайновый
style="" !important
Зная эти правила, вы сможете объяснить поведение любого CSS-правила в проекте.
💬 Комментарии (0)
Комментариев пока нет
Станьте первым, кто поделится мнением об этой статье!