CSS !important Правило

Что такое !important

Правило !important в CSS используется для увеличения веса стиля.

!importantНезависимо от приоритета, оно напрямую связано с конечным результатом. Когда используется правило !important, это объявление переопределит любое другое объявление.

Пример

#myid { background-color: blue; } .myclass { background-color: gray; } p { background-color: red !important; }

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

В приведённом выше примере, хотя ID-селекторы и селекторы классов имеют более высокий приоритет, цвет фона всех трёх абзацев отображается красным, потому что правило !important переопределяет свойство background-color.

Важные замечания

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

Когда два конфликтующих объявления с правилами !important применяются к одному и тому же элементу, будет принято объявление с более высоким приоритетом.

В следующем примере при просмотре исходного кода CSS не совсем понятно, какой цвет является наиболее важным:

Пример

#myid { background-color: blue !important; } .myclass { background-color: gray !important; } p { background-color: red !important; }

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

Рекомендации по использованию:

  • ОпределённоСтарайтесь решать проблемы с помощью приоритета правил стилей, а не!important
  • ТолькоИспользуйте его на конкретных страницах, где нужно переопределить CSS сайта или внешний CSS.!important
  • НикогдаНе используйте его в своём плагине!important
  • НикогдаНе используйте его в CSS-коде для всего сайта.!important

Когда использовать !important

Если вы хотите задать стиль для всего сайта, вы можете использовать !important.

Например, если мы хотим, чтобы все кнопки на сайте имели одинаковый стиль:

Пример

.button { background-color: #8c8c8c; color: white; padding: 5px; border: 1px solid black; }

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

Если мы поместим кнопку в другой элемент с более высоким приоритетом, внешний вид кнопки изменится, и свойства будут конфликтовать, как в следующем примере:

Пример

.button { background-color: #8c8c8c; color: white; padding: 5px; border: 1px solid black; } #myDiv a { color: red; background-color: yellow; }

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

Если вы хотите, чтобы все кнопки имели одинаковый внешний вид, мы можем добавить правило !important в свойство style кнопки, как показано ниже:

Пример

.button { background-color: #8c8c8c !important; color: white !important; padding: 5px !important; border: 1px solid black !important; } #myDiv a { color: red; background-color: yellow; }

Попробуйте сами »
Другие расширения