Что значит! Важное в CSS?

409

Что !importantзначит в CSS?

Это доступно в CSS 2? CSS 3?

Где это поддерживается? Все современные браузеры?

css Итай Моав -Малимовка
источник
2
w3.org/TR/CSS2/cascade.html#important-rules
j08691
17
... что-то, чтобы избежать когда бы ни было возможно.
Скотт
2
возможный дубликат Как вы читаете! важно в CSS? , Каковы последствия использования «важно!» В CSS? а также смотрите: когда использовать! важное свойство в css? , Когда использовать «! Важно», чтобы сохранить день (при работе с CSS)
Коди Грей

Ответы:

400

По сути, это означает, что это говорит; что «это важно, игнорируйте последующие правила и любые обычные проблемы специфичности, применяйте это правило!»

При обычном использовании правило, определенное во внешней таблице стилей, отменяется стилем, определенным в headдокументе, который, в свою очередь, отменяется встроенным стилем внутри самого элемента (при условии равной специфичности селекторов). Определение правила с помощью !important«атрибута» (?) Отбрасывает обычные проблемы в отношении «более позднего» правила, переопределяющего «более ранние» правила.

Кроме того, обычно более конкретное правило переопределяет менее конкретное правило. Так:

a {
    /* css */
}

Обычно отменяется:

body div #elementID ul li a {
    /* css */
}

Поскольку последний селектор более специфичен (и, как правило, не имеет значения, где находится более специфичный селектор (во headвнешней таблице стилей или во внешней), он все равно будет переопределять менее специфичный селектор (атрибуты встроенного стиля всегда будут переопределите конкретный селектор «more-» или «less-», так как он всегда более конкретный.

Однако, если вы добавите !importantв объявление CSS менее специфичного селектора, оно будет иметь приоритет.

Использование !importantимеет свои цели (хотя мне трудно думать о них), но это похоже на использование ядерного взрыва, чтобы остановить лис, убивающих ваших цыплят; да, лисы будут убиты, но и куры тоже. И окрестности.

Это также делает отладку вашего CSS кошмаром (из личного, эмпирического, опыта).

Дэвид говорит восстановить Монику
источник
253
Это также сбивает с толку многих разработчиков, так как во многих языках программирования префикс! значит нет .
rustyx
19
Одной из целей для! Important является сценарий GreaseMonkey, в котором вы намеренно переопределяете CSS других людей, который, вероятно, более специфичен, чем ваш.
Нумен
1
Официально W3 называет это «правилом».
ДжейДи Смит
5
по крайней мере, это не саркастично и говорит important!(важно НЕТ)
user3553260
2
Вы писали: «При обычном использовании правило, определенное во внешней таблице стилей, отменяется стилем, определенным в заголовке документа». Это неверно.
jlguenego
130

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

Итак, если у вас есть следующее:

.class {
   color:red !important;
}
.outerClass .class {
   color:blue;
}

будет применяться правило с важным (не считая специфики )

Я считаю, что !importantпоявился в CSS1, поэтому каждый браузер поддерживает его (от IE4 до IE6 с частичной реализацией, IE7 + полный)

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

nicosantangelo
источник
1
IE4 +, на самом деле, с ошибками, до 6 включительно.
BoltClock
15
Путаница происходит, как !символ НЕ в некоторых языках, но теперь она понятнее.
Si8
2
Я особенно рад, что вы включили синтаксис для использования !important. CSS достаточно отличается от других языков, поэтому легко забыть, как использовать определенные вещи.
Blainarmstrong
3
@ Si8 - Да, из-за этой путаницы я всегда думал, что «они» должны были определить это как important!, а может быть IMPORTANT!, а не !important. Интересно, кто-нибудь (кто мог бы прочитать это) знает, почему они определили это с пунктуацией перед? Очевидно, уже слишком поздно, чтобы изменить это сейчас.
Кевин Феган
22

!important является частью CSS1.

Браузеры, поддерживающие его: IE5.5 +, Firefox 1+, Safari 3+, Chrome 1+.

Это означает, что-то вроде:

Используйте меня, если вокруг нет ничего более важного!

Не могу сказать, что лучше.

циклон
источник
5
!importantне ограничивается только Safari 3+; он поддерживал его с самого начала, как и все другие браузеры, отличные от IE. IE понимает его начиная с версии 4, но поддерживает только без ошибок, начиная с версии 7.
BoltClock
12

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

Вот приоритет от низшего к высшему:

  1. стили браузера
  2. объявления таблицы стилей пользователя (без! важный)
  3. объявления таблицы стилей автора (без! важный)
  4. ! важные авторские таблицы стилей
  5. ! важные пользовательские таблицы стилей

После этого имеет место специфика для правил, все еще имеющих палец в пироге.

Ссылки:

Фабиан Барни
источник
Как указал @ fabian-barney, !importantэто модификатор каскадного порядка developer.mozilla.org/en-US/docs/Web/CSS/Cascade (см. Таблицу для справки).
Doomjunky