что такое !важно и когда его использовать???
Браузер решает, используя правило специфичности, какие значения свойств CSS наиболее важны для элемента и, следовательно, будут применяться. Но когда вы используете правило !important для объявления стиля, это объявление переопределяет любые другие объявления. Он получит наивысший приоритет, так как имя предполагает, что это важно.
p{
color: red !important ;
}
.text{
color: blue ;
}
#test{
color: yellow;
}
<p class="text" id='test'>!important in CSS </p>
Типы селекторов
Следующий список типов селекторов увеличивается по специфичности:
- Селекторы типов (например,
h1) и псевдоэлементы (например,::before). - Селекторы классов (например,
.example), селекторы атрибутов (например,[type="radio"]) и псевдоклассы (например,:hover). - Селекторы идентификаторов (например,
#example).
В соответствии с правилом специфичности селекторы идентификаторов имеют больший вес, чем селекторы классов и селекторы типов. Но мы использовали правило !important в селекторе типа, поэтому браузер применит свойство CSS с правилом !important к элементу.
В приведенном выше случае
color: red ;будет применено к элементу абзаца.
Когда два конфликтующих объявления с правилом !important применяются к одному и тому же элементу, будет применяться объявление с большей специфичностью.
Когда следует использовать !Важное правило ???
Никогда. Вы не должны использовать правило !important . Потому что правило !important изменяет обычное каскадирование CSS в вашей таблице стилей. Вы не должны использовать правило !important, если в этом нет крайней необходимости. Он используется только в некоторых особых сценариях, таких как —
- Переопределение внешнего CSS (Bootstrap, Tailwind CSS).
- Переопределение встроенных стилей
- Переопределение максимальной специфичности
!important — это очень быстрое и простое решение для устранения любой основной проблемы с таблицей стилей приложения, но оно также имеет недостатки. Это усложняет отладку приложения. Избегайте использования !important при написании таблицы стилей для приложения и всегда используйте спецификацию CSS.
Тем не менее, !important является допустимым CSS. Поэтому вы должны знать о вариантах использования этого правила. Вы не должны стремиться к быстрому исправлению, используя !important в своей таблице стилей. Это может решить вашу проблему на данный момент, но нарушает естественный поток каскадирования CSS. Так что это может привести к большим проблемам в будущем. Вот почему настоятельно рекомендуется избегать использования правила !important.
ИСТОЧНИКИ —
