Как перебить important css

!important

Играет роль в том случае, когда пользователи подключают свою собственную таблицу стилей. Если возникает противоречие, когда стиль автора страницы и пользователя для одного и того же элемента не совпадает, то !important позволяет повысить приоритет стиля.

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

!important добавлен в авторский стиль — будет применяться стиль автора.
!important добавлен в пользовательский стиль — будет применяться стиль пользователя.
!important нет как в авторском стиле, так и стиле пользователя — будет применяться стиль автора.
!important содержится в авторском стиле и стиле пользователя — будет применяться стиль пользователя.

Итог от применения !important в общем случае показан в табл. 1.

Lorem ipsum dolor sit amet.

Будет применяться стиль автора, а именно: установлен серый цвет текста, размер шрифта 8 пунктов.

Lorem ipsum dolor sit amet.

Цвет текста будет установлен пользовательским, а размер шрифта останется исходным. В итоге увидим черный текст размером 8 пунктов.

Lorem ipsum dolor sit amet.

Будут использоваться все стилевые свойства пользователя. Текст станет отображаться как черный, размер 12 пунктов.

Lorem ipsum dolor sit amet.

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

В браузере Internet Explorer подключение стиля пользователя делается через меню Сервис > Свойство обозревателя > Оформление , как показано на рис. 1.

Подключение стиля пользователя в браузере Internet Explorer

Рис. 1. Подключение стиля пользователя в браузере Internet Explorer

В браузере Opera аналогичное действие происходит через команду Инструменты > Общие настройки > Вкладка «Расширенные» > Содержимое > Кнопка «Настроить стили» (рис. 2).

Подключение стиля пользователя в браузере Opera

Рис. 2. Подключение стиля пользователя в браузере Opera

Синтаксис

Свойство: значение !important

Значения

У этого свойства нет значений.

HTML5 CSS2.1 IE Cr Op Sa Fx

    important   Минорная пентатоника с пониженной V ступенью также называется блюзовой пентатоникой.

В данном примере для одного селектора задается одно и то же свойство с разными значениями. Но поскольку к первому селектору добавляется !important , то его стиль и будет применяться на странице.

Браузеры

При добавлении !important к значению стилевого свойства его важность повышается. Если переопределить значение того же свойства без !important , оно будет игнорироваться браузерами. Но только не в Intenet Explorer версии 6 и ниже.

Приоритет в css

Что в css приоритетнее? То, что указано в аттрибуте style=»» или то, что с !important? Можно ли чем-то перекрыть style?

Отслеживать
задан 18 авг 2016 в 18:45
JamesJGoodwin JamesJGoodwin
3,968 6 6 золотых знаков 38 38 серебряных знаков 73 73 бронзовых знака

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

!important перебивает стили, вне зависимости от порядка подключения последних.

Вообще, порядок такой:

Стили из и — применяются в первую очередь, в том порядке, в каком подключались в html;
Инлайновые стили (те, что в style=»» ) применяются вторыми;

!important же перебивает любые стили, неважно, где они были объявлены.

P.S. Перебить !important стиль может только такой же !important , только объявленный позже.

Перестаньте использовать !important. Помогаем разобраться с каскадом CSS

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

Когда CSS-правило не работает, многие разработчики хотят добавить !important и забыть о проблеме. Рассказываем, почему так делать не стоит и как правильно работать с CSS.

Почему CSS-правило может не работать?

Когда браузер загружает веб-страницу, он собирает все CSS-правила, которые встречает: из внешних файлов, напрямую указанные в HTML-коде, добавленные с помощью JS. У каждого правила есть селектор, которые говорит к каким HTML-элементам его надо применять. Часто так случается, что один и тот же элемент получает не одно правило, а два и больше. И иногда эти правила даже относятся к одним и тем же свойствам.

Скорее всего именно по этой причине ваш CSS не работает. Просто есть другое правило, которое перекрывает ваше и применяется оно. Не может же быть цвет кнопки одновременно синим и красным.

Так как понять, какое CSS-правило «главнее»?

Для этого нам нужно представить, что все правила упорядочены по некоторой вертикали, которая называется каскадом стилей. Чем выше правило, тем больше у него приоритет. Если вы хотите, чтобы ваше правило применялось, надо чтобы оно было самым высоким по приоритету среди тех, которые содержат те же самые свойства. Дальше мы разберёмся, что влияет на приоритет и как строится этот самый каскад.

Но вернёмся к !important . Это магическое слово сразу же поднимет приоритет вашего CSS-правила до небес. Но так всё равно лучше не делать, потому что:

так код сложнее поддерживать (если с вашим кодом будет работать человек, который знает, как строится каскад стилей, он не сможет ничего нормально написать как бы ни старался),
надо постоянно использовать !important и дальше.

Зачем же всё таки иногда нужен !important?

Чтобы переписать inline-свойства. Нужно редко, но иногда пригождается.
Чтобы переписать !important сторонней библиотеки. Если её разработчик по какой-то причине его использовал. Возможно как раз потому, что не понимал каскад.
Для прототипирования. Чтобы быстро прописать новые стили, вывести их наверх каскада, посмотреть результат и если всё устраивается — переписать правильно.

Как работает каскад CSS?

Общий принцип прост: «Чем специфичнее правило — тем выше оно в каскаде». Например, у нас на сайте в списке статей на главной каждый пост — это контейнер с классом box. У него прописан стиль

Это правило добавляет красивую рамку. Но в тёмной теме это бессмысленно, ибо на тёмном фоне тёмная рамка не нужна. В тёмной теме и так достаточно контраста.

Мы добавили правило

.dark .box

И прописали у тега body (родительский тег для всего контента вообще на сайте) класс dark.

В итоге второе правило более специфично, оно даёт путь из двух компонент. И применяется именно оно, перекрывая предыдущее. То есть в тёмной теме рамки у постов нет.

Каскад CSS

1. Важность

Первая ступень каскада рассматривает тип правила.

Есть четыре уровня типов:

transition (переход). Правила, которые применяются к активному переходу, имеют первостепенную важность.
!important . Если поставить !important в конце правила, оно перейдёт на этот уровень каскада. В идеале вы должны использовать !important только для переопределения inline-стилей или других !important из сторонних библиотек.
animation (анимация). Правила, применяющиеся к активной анимации, повышают уровень в каскаде.
normal . На этом уровне находится основная часть правил.

Как видите, эти типы обеспечивают корректную анимацию элементов. Если оба правила относятся к одному уровню, приоритет определяется на другой ступени каскада.

2. Происхождение

Вторая ступень смотрит, где определено правило.

Таких мест может быть три (расположены в порядке приоритета):

Веб-сайт. Единственный уровень, который вы можете контролировать как веб-разработчик.
Пользователь. Стили, которые пользователь подключает через настройки браузера.
Браузер. У каждого браузера есть свой набор стилей — например элемент всегда использует стиль браузера по умолчанию.
Так выглядит кнопка в вашем браузере

Примечание Важно! Иерархия для правил с !important здесь работает наоборот: !important -правило браузера выигрывает у !important -правила веб-сайта, тогда как обычные правила сайта превосходят правила браузера.

3. Специфичность

На третьей ступени важна специфичность правила. Значение специфичности определяется исходя из уровней селекторов CSS.
Всего уровней четыре:

inline . Стили, объявленные в HTML-свойстве style , обладают наибольшей специфичностью.
id . Можно использовать идентификатор (синтаксис #id ) для определения стиля конкретного элемента.
класс | атрибут | псевдокласс . Определять стиль элемента также позволяют классы (синтаксис .class ). Этот уровень включает селекторы HTML-атрибутов, например [checked] или [href=»https://wattenberger.com»] , и псевдоклассы, такие как :hover и :first-of-type .
тип | псевдоэлемент . Тип тега (синтаксис type ) тоже используется для определения стиля элементов. Сюда же входят псевдоэлементы вроде :before и :selection .

Стоит отметить, что здесь имеет значение число «вхождений» в какой-либо уровень.

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

4. Позиция

Последняя ступень каскада смотрит на порядок определения правил.

Всегда побеждает то правило, которое объявлено позже (при условии, что всё остальное в каскаде одинаково).

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

А теперь небольшой тест: как думаете, какое из двух правил победит?

Следите за новыми постами по любимым темам

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