Правило !important CSS
- Предыдущая страница Специфичность CSS
- Следующая страница Математические функции CSS
Что такое !important?
В CSS !important Правила используются для повышения приоритета свойств/значений по сравнению с обычными стилями.
На самом деле, если вы использовали !important Правила, которые будут перекрывать все предыдущие правила для данного свойства элемента!
Давайте рассмотрим пример:
Пример
#myid {
background-color: blue;
}
.myclass {
background-color: gray;
}
p {
background-color: red !important;
}
Объяснение примера
В этом примере все три абзаца получат красный цвет фона, несмотря на то, что у идентификатора и класса выборщики имеют более высокую специфичность.!important Правила покрытия охватывают эти два случая для свойства background-color.
Важные моменты о !important
покрытие !important Единственный способ покрыть правила - это включить в исходный код другое объявление с той же (или более высокой) специфичностью !important Правила - это начало проблемы! Это делает код CSS запутанным, и отладка также становится сложной, особенно если у вас есть крупные таблицы стилей!
Здесь мы создали простой пример. Когда вы смотрите на исходный код CSS, не всегда ясно,哪种 цвет считается наиболее важным:
Пример
#myid {
background-color: blue !important;
}
.myclass {
background-color: gray !important;
}
p {
background-color: red !important;
}
Совет:Понимание !important Правила хорошие. Вы можете увидеть его в некоторых исходных кодах CSS. Но, если вы не абсолютно уверены, что вам нужно использовать его, не используйте его.
Может быть одно или два обоснованных использования !important
Одна из возможностей использования !important Ситуация такова, если вам необходимо заменить стили, которые не могут быть заменены другими способами. Это может быть связано с тем, что вы используете контент-管理系统 (CMS) и не можете редактировать код CSS. В этом случае вы можете установить некоторые пользовательские стили для замены некоторых стилей CMS.
Одна из возможностей использования !important Ситуация такова: предположим, что вы хотите, чтобы все кнопки на странице имели особый вид. В этом случае стиль кнопки будет серым фоном, белым текстом и некоторыми внутренними полями и границами:
Пример
.button {
background-color: #8c8c8c;
color: white;
padding: 5px;
}
Если мы поместим кнопку в другой элемент с более высокой специфичностью, внешний вид кнопки иногда может измениться, и могут возникнуть конфликты свойств. Вот один из примеров:
Пример
.button {
background-color: #8c8c8c;
color: white;
padding: 5px;
}
#myDiv a {
color: red;
background-color: yellow;
}
Чтобы !important Правила добавляются к свойствам кнопки, как показано ниже:
Пример
.button {
background-color: #8c8c8c !important;
color: white !important;
padding: 5px !important;
border: 1px solid black !important;
}
#myDiv a {
color: red;
background-color: yellow;
}
- Предыдущая страница Специфичность CSS
- Следующая страница Математические функции CSS
