2012-02-12 3 views
269

Можно создать дубликат:
What are the implications of using “!important” in CSS?
How do you read !important in CSS?Что важно для CSS?

Что !important в CSS означает?
Это только для css2, css3, IE?

+2

http://www.w3.org/TR/CSS2/cascade.html#important-rules – j08691

+9

... что-то, чтобы избежать как только возможно. – Scott

+2

Возможный дубликат [Как вы читаете! Важно в CSS?] (Http://stackoverflow.com/questions/7369216/how-do-you-read-important-in-css), [Каковы последствия использования «Важно» в CSS?] (Http://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css), а также см.: [Когда использовать! Важное свойство в css?] (http://stackoverflow.com/questions/5701149/when-to-use-important-property-in-css), [Когда использовать «! important», чтобы сохранить день (при работе с CSS) ] (http://stackoverflow.com/questions/2042497/when-to-use-important-to-save-the-day-when-working-with-css) –

ответ

275

Это означает, по существу, то, что он говорит; что «это важно, игнорировать последующие правила и любые обычные проблемы с конкретностью, примените это правило

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

Также, как правило, более конкретное правило будет отменять менее конкретное правило. Итак:

a { 
    /* css */ 
} 

обычно преодолевается:

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

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

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

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

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

+145

Он также запутан для многих разработчиков, как и во многих программах языки префикс! означает * нет *. – rustyx

+8

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

+0

Официально W3 [называет это] (http://www.w3.org/TR/CSS2/cascade.html#important-rules) «правилом». –

18

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

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

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

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

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

+4

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

5

Он изменяет правила для приоритета приоритета каскадов css. См. the CSS2 spec.

85

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

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

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

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

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

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

+1

IE4 +, на самом деле, с ошибками, вплоть до 6. – BoltClock

+12

Путаница происходит, поскольку '!' Является символом NOT в некоторых но теперь это яснее. – Si8

+2

Я особенно рад, что вы включили синтаксис для использования '! Important'. CSS отличается от других языков тем, что легко забыть, как использовать определенные вещи. – blainarmstrong

9

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

Вот приоритет от низшего к высшему: (! Не важно)

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

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

Ссылки:

+2

secifity => специфичность? –

Смежные вопросы