Как переопределить важное правило css на определенной странице
У меня есть родительский файл .sass, в котором я определяю следующее правило
.printableLogo {
display: none;
&.hide {
@media print {
overflow: hidden;
display: block !important;
}
}
}
для конкретной страницы я хочу, чтобы отображение не отображалось.
как этого добиться?
дисплей уже отсутствует в вашем коде. Моя идея состояла бы в том, чтобы разместить класс или идентификатор на конкретной странице и написать другое правило для этого особого случая.
вы используете то же имя класса, используя "! important": &. hide {@media print {overflow: hidden; дисплей: нет! важно; }}
Используйте встроенное правило и примените его к div.
Ответы 5
Я предлагаю вам сделать одно из следующего.
Никогда использовать
!importantв родительском / глобальном файле CSSЕсли необходимо отменить это, напишите встроенный CSS или добавьте тег CSS на конкретной странице.
Добавьте еще один уникальный класс / идентификатор для конкретного div и примените для этого стиль.
Решение 1. Введите атрибут стиля непосредственно в элемент на этой конкретной странице (style = "display: none;"). Имейте в виду, что важный переопределит этот стиль. Так что либо удалите важный из вашего sass, либо добавьте его к встроенному.
Решение 2. Поместите определенный класс или идентификатор в элемент на этой странице, на который вы затем можете ссылаться в своем sass.
Решение 3. Введите уникальный идентификатор в теле для каждой страницы, на который затем можно ссылаться в своем sass, чтобы применить стили к элементам на определенных страницах.
Попробуй это
<body class = "pagenumber1">
.pagenumber1 .printableLogo {
display:none;
}
Вы можете добавить новый файл .sass и связать его под общим файлом css и использовать, например,:
display:unset !important;
Обратите внимание, что значение unset поддерживается не всеми основными браузерами: caniuse.com/#feat=css-unset-value (спойлер: IE не поддерживает)
Я также не буду предлагать использовать display: unset! Important; вы можете добавить идентификатор для переопределения CSS, если нет возможности добавить встроенный CSS или идентификатор, тогда вы можете использовать display: unset! important;
вы также можете попробовать это в конкретном шаблоне страницы
<style>
.selector{
display:none;
}
<style>
вы можете добавить стиль к этой конкретной странице