Как использовать свойство !Important в CSS
При стилизации вашего веб-сайта вы можете применить несколько объявлений CSS к одному и тому же элементу. В этом случае браузер определяет, какие объявления наиболее актуальны для элемента, и применяет их.
Эта релевантность – или специфичность – основана на правилах сопоставления селекторов CSS. Селекторы CSS – это модификаторы, которые сообщают браузеру, какие элементы следует стилизовать с помощью CSS. Существуют разные типы селекторов, каждый со своим синтаксисом и уровнем специфичности.
Следующие типы селекторов ранжируются от самой высокой до самой низкой:
- Селекторы ID: они выбирают элемент на основе его атрибута ID и имеют синтаксис #idname .
-
Селекторы классов, селекторы атрибутов и селекторы псевдоклассов:
a) Селекторы классов выбирают все элементы в классе CSS и имеют синтаксическое имя .class .б)
Селекторы атрибутов выбирают все элементы, которые имеют данный атрибут и имеют синтаксис [attr] .
c)
Селекторы псевдокласса выбирают элементы только тогда, когда они находятся в особом состоянии, например посещенном или наведенном, и имеют селектор синтаксиса: псевдокласс .
- Селекторы типа: они выбирают все элементы HTML, которые имеют заданное имя узла и элемент синтаксиса .
Примечание. Универсальный селектор (*) не влияет на специфичность.
Если несколько объявлений с одинаковой специфичностью, таких как селектор класса и селектор атрибутов, сделаны для одного и того же элемента, то последнее объявление (то есть объявление, указанное ниже в таблице стилей) будет применено к элементу.
Есть еще одно важное правило, которое следует учитывать при кодировании HTML и CSS вашего веб-сайта:! Important. Это исключение из всех упомянутых выше правил специфичности. Давайте подробнее рассмотрим, что это означает ниже.
Что значит "важно" в CSS?
В CSS значение important означает, что к элементу должно применяться только значение свойства! Important, а все другие объявления элемента следует игнорировать. Другими словами, важное правило может использоваться для переопределения других правил стилизации в CSS.
Хотя при объединении значений свойств проще, чем следовать многочисленным правилам специфичности, использование свойства! Important считается плохой практикой, потому что оно нарушает естественное каскадирование таблиц стилей, что значительно затрудняет обслуживание и отладку вашего веб-сайта.
Однако есть определенные варианты использования, в которых использование свойства! Important является идеальным. Один из таких вариантов использования – определение служебных классов. Крис Койер в статье «Уловки CSS» использует в качестве примера класс кнопки.
Обратите внимание: я буду использовать онлайн-редактор кода W3Schools для создания приведенных ниже примеров на основе кода Койера. Вы можете щелкнуть любую ссылку на исходный код, чтобы просмотреть полный фрагмент кода для примера и создать свой собственный.
Допустим, вы хотите, чтобы любой элемент, на который нацелен класс кнопки, выглядел как одна и та же кнопка: красный фон, белый цвет шрифта, сплошная черная рамка. Без свойства! Important вы бы использовали следующий код, чтобы ссылка выглядела как кнопка.
Вот HTML:
<a href="#" class="button">Do Thing</a>
Вот CSS:
.button {
background: red;
color: white;
padding: 3px;
border-radius: 5px;
border: 1px solid black;
}
Вот результат:
Теперь предположим, что вы продолжаете создавать свою веб-страницу. В какой-то момент вы добавляете в свой HTML новый раздел с идентификатором «content». Этот раздел содержит еще одну ссылку с классом кнопки. Вы также добавляете еще одно правило в свой CSS, определяя все элементы с идентификатором «content», чтобы они имели синюю границу с точками. У вас будет следующий код.
Вот HTML:
<a href="#" class="button">Do Thing</a>
<section id="content">
<p> text text blah <a href="#" class="button">Do Thing</a> </p>
</section>
Вот CSS:
.button {
background: red;
color: white;
padding: 3px;
border-radius: 5px;
border: 1px solid black;
}
#content a {
border: 1px dotted blue;
}
Вот результат:
Поскольку селектор идентификатора имеет более высокую специфичность, чем селектор класса, стиль CSS селектора #content a имеет приоритет над стилем CSS селектора .button. Вот почему у второго элемента есть синяя пунктирная рамка, а не сплошная черная.
Подобный сценарий неизбежен, независимо от того, создаете ли вы сайт с нуля или используете фреймворк, такой как Bootstrap CSS. Чем больше объем кода, с которым вы работаете, тем сложнее отслеживать специфику ваших селекторов CSS.
Вы можете избежать несоответствий стиля вышеупомянутого сценария на своем сайте, используя свойство! Important. Давайте посмотрим, как именно использовать это свойство ниже.
Как использовать Important в CSS
Использовать правило! Important в CSS очень просто. Вам просто нужно добавить! Important в конце строки, непосредственно перед точкой с запятой. Итак, синтаксис будет таким:
element {
style property !important;
}
Давайте посмотрим, как изменяется CSS для приведенного выше примера при добавлении правила! Important.
HTML остается прежним:
<a href="#" class="button">Do Thing</a>
<section id="content">
<p> text text blah <a href="#" class="button">Do Thing</a> </p>
</section>
CSS становится:
.button {
background: red !important;
color: white !important;
padding: 3px !important;
border-radius: 5px !important;
border: 1px solid black !important;
}
#content a {
border: 1px dotted blue;
}
Результат:
Вы заметите, что оба элемента выглядят одинаково благодаря правилу! Important.
Но предположим, что вы изменили цветовую схему своего веб-сайта или не хотите, чтобы все элементы с классом кнопки выглядели одинаково. Какой бы ни была причина, вы можете изменить правило! Important в своем CSS. Посмотрим, как это делается ниже.
Как переопределить важное в CSS
Есть два способа переопределить тег! Important в CSS. Вы можете добавить еще одно правило CSS с тегом! Important и использовать селектор с более высокой специфичностью. Или вы можете добавить другое правило CSS с тегом! Important, используя тот же селектор, и просто добавить его позже в таблице стилей.
Почему работают эти два метода? Из-за правил специфики. Когда два объявления, использующие правило! Important, применяются к одному и тому же элементу, будет применяться объявление с большей специфичностью или объявление, определенное последним. Возможно, вы помните эти правила из введения, но важно понимать, что они применяются к объявлениям, использующим правило! Important, а также к объявлениям, не использующим правило.
Вместо того, чтобы заменять свойство! Important в CSS другим свойством! Important, лучше всего переписать правило и полностью отказаться от использования этого свойства. Но иногда это невозможно.
Возьмем, к примеру, пользовательские таблицы стилей. Используя настраиваемую таблицу стилей пользователя, читатель может переопределить стили веб-сайта в соответствии со своими пожеланиями. Читатель может, например, увеличить размер шрифта или изменить цвет типографики на странице, чтобы они могли лучше видеть контент.
Поскольку определяемая пользователем таблица стилей переопределяет таблицу стилей автора независимо от специфики, читатель может добавлять правила CSS без тега! Important. Однако, если таблица стилей автора использует правило! Important для определения размера или цвета шрифта, тогда в таблице стилей пользователя будет необходимо правило! Important.
Давайте продолжим использовать тот же пример кнопки сверху. Скажем, на моем веб-сайте уже были применены важные правила к классу кнопок. Но теперь я хочу, чтобы все элементы с именем «content» имели синюю пунктирную рамку.
Мне нужно просто переписать код, удалив все важные теги из моего CSS. Но, допустим, у меня не хватает времени и я ищу быстрое решение. Затем я мог бы просто добавить тег! Important в селектор CSS ID. Тогда оба объявления будут использовать свойство! Important, и, поскольку селекторы ID имеют более высокую специфичность, чем селекторы классов, элемент в разделе содержимого будет иметь синюю пунктирную границу.
HTML остается прежним:
<a href="#" class="button">Do Thing</a>
<section id="content">
<p> text text blah <a href="#" class="button">Do Thing</a> </p>
</section>
CSS становится:
.button {
background: red !important;
color: white !important;
padding: 3px !important;
border-radius: 5px !important;
border: 1px solid black !important;
}
#content a {
border: 1px dotted blue !important;
}
Результат:
Теперь предположим, что я хочу, чтобы все кнопки на моем веб-сайте были обведены синей пунктирной рамкой. Опять же, мне нужно просто переписать код, но я могу использовать тег! Important для быстрого исправления. Используя тот же селектор классов .btn с новым правилом для синей пунктирной границы и тегом! Important, я могу просто добавить его после существующего правила в таблице стилей. Поскольку он появится позже, он имеет более высокую специфичность и будет применяться к элементам с классом .btn.
HTML остается прежним:
<a href="#" class="button">Do Thing</a>
<section id="content">
<p> text text blah <a href="#" class="button">Do Thing</a> </p>
</section>
CSS становится:
.button {
background: red !important;
color: white !important;
padding: 3px !important;
border-radius: 5px !important;
border: 1px solid black !important;
}
.button {
border: 1px dotted blue !important;
}
Вот результат:
Использование свойства! Important в вашем CSS
Хотя объявления! Important следует редко использовать в коде, все же необходимо понимать, что это за свойство и как его использовать. Возможно, вам понадобится использовать правило! Important в ваших пользовательских таблицах стилей. Возможно, вы возьмете на себя управление веб-сайтом, содержащим экземпляры правила. Какова бы ни была причина, знакомство со свойством! Important является полезным шагом в изучении HTML и CSS.
Источник записи: https://blog.hubspot.com