Загрузка...

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

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

Что значит специфичность?

Специфичность — вес, который браузер даёт селектору. При конфликте для этого свойства побеждает более тяжёлый селектор. Для повседневной работы запомните лестницу: inline-стиль > id > class (и атрибут / псевдокласс) > element (и псевдоэлемент). Сами * и комбинаторы вес не добавляют.

Ранг одним взглядом

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

📊 Ранг специфичности CSS (повседневный)

Тип Примеры Обычно побеждает
Inline-стиль style="color: red" Почти всё в таблице стилей
Id #hero, #nav Классы и элементы
Class / атрибут / псевдокласс .card, [type="email"], :hover Селекторы element
Element / псевдоэлемент p, h1, ::before Только более слабые или равные правила (потом порядок источника)

class сильнее element

Селектор тега широкий. Класс точнее — цвет класса побеждает. Порядок важен только при равном весе.

class побеждает element

css
CSS Code 
p {
color: #334155;
}

.note {
color: #0f766e;
}

Как читать конфликт

Для <p class="note"> подходят оба правила. .note — class; p — element. Класс побеждает → бирюзовый текст.

id сильнее class

Id тяжелее class. Для повторно используемого вида предпочитайте class; id оставляйте для уникального крючка.

id побеждает class

css
CSS Code 
.note {
color: #0f766e;
}

#title {
color: #9f1239;
}

Почему это важно

Если <h1 id="title" class="note"> стал бордовым, победил id — не из «чувства важности», а из большего веса.

Равный вес → побеждает правило ниже

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

Одинаковый вес — решает порядок источника

css
CSS Code 
.card {
border-color: #cbd5e1;
}

.card {
border-color: #0f766e;
}

Привычка при ничьей

Оба селектора — один class. Второе правило .card побеждает → бирюзовая рамка. Хотели первый цвет — проверьте, не совпадает ли ещё более сильный селектор.

Комбинации селекторов на практике

Селекторы комбинируются: nav a.button:hover сильнее голого a, потому что добавлены class и псевдокласс. Не нужен калькулятор на каждой строке — спросите: «Есть id? Лишний class? Или только теги?»

Комбинированный селектор бьёт голый element

css
CSS Code 
a {
color: #334155;
}

nav a.button {
color: #0f766e;
}

Про !important

!important может обойти обычную специфичность. Огнетушитель, не ежедневный инструмент. Злоупотребление усложняет поздние правки. Сначала структура и более ясные селекторы.

Практические привычки

  • Для вида class; id для уникального крючка
  • Застряли? На какой ступени лестницы каждый селектор?
  • Равный вес → смотрите правило ниже в файле
  • Не стройте длинные цепочки только чтобы «победить» — ломаются при смене HTML
  • !important в конце, не в начале

Попробуйте сами

  1. Страница с <p class="note">Привет</p>, <h1 id="title" class="note">Заголовок</h1> и <a class="button">Вперёд</a> внутри <nav>.
  2. Пара element против class (p серый, .note бирюзовый) — абзац note бирюзовый.
  3. Добавьте #title { color: #9f1239; } — заголовок станет бордовым несмотря на .note.
  4. Два правила .card для border-color — побеждает второе.
  5. По желанию: сравните a { … } и nav a.button { … } на ссылке в nav.

Частые ошибки

  • Думать, что «больше объявлений» поднимают специфичность — нет
  • Считать, что последний файл всегда бьёт id — больший вес всё равно побеждает
  • Делать #всё или !important решением по умолчанию
  • Путать ступени (считать class как element)
  • Забывать, что при равном весе решает порядок источника

Кратко

  • Специфичность решает конфликты по одному свойству
  • Повседневная лестница: inline > id > class/атрибут/псевдокласс > element/псевдоэлемент
  • Равный вес → правило ниже
  • Для вида class; id и !important редко
  • Сначала ступень, потом порядок
  • Практикуйтесь с p / .note / #title, пока победитель не станет очевиден

🧠 Проверьте Свои Знания

Готов к Началу

Проверьте Свои Знания

Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему

❓
7
Вопросы
🎯
70%
Для Прохождения
♾️
∞
Время
🔄
∞
Попытки

📝 Инструкции

  • Внимательно прочитайте каждый вопрос
  • Выберите лучший ответ на каждый вопрос
  • Вы можете пересдавать тест столько раз, сколько захотите
  • Ваш прогресс будет показан вверху
Тема 1 из 1
Css Урок