Если у вас
<div style="display: none !important;"></div>
Есть ли способ переопределить это в таблице стилей, чтобы отобразить его?
Предпочтительно использовать что-то похожее на это:
div { display: block !important; }
Если у вас
<div style="display: none !important;"></div>
Есть ли способ переопределить это в таблице стилей, чтобы отобразить его?
Предпочтительно использовать что-то похожее на это:
div { display: block !important; }
Позвольте мне сначала сказать, что в целом встроенные стили могут быть переопределены:
.override {color:red !important;}
<p style="color:blue;">I will be blue</p>
<p style="color:blue;" class="override">But I will be red</p>
Это описание описано в спецификациях W3, где указано, что объявления !important
не изменяют специфику, а скорее имеют преимущество перед "нормальные" декларации.
При этом, когда конфликтующие правила имеют флаг !important
, специфика диктует, что применяется встроенное правило - это означает, что для сценария OP нет возможности переопределить встроенный !important
.
Вы не можете переопределить встроенный CSS, если он имеет !important
. Он имеет более высокий приоритет, чем стиль в вашем внешнем файле CSS.
Однако, если вы хотите, чтобы он впоследствии изменил некоторые действия, вы можете использовать немного JavaScript.
Вы не можете переопределить встроенный CSS с !important
, поскольку он имеет более высокий приоритет, но, используя JavaScript, вы можете достичь того, чего хотите.
Вы не можете переопределить встроенный стиль с !important
. Первое предпочтение - встроенный стиль.
Например, у нас есть класс
.styleT{float:left;padding-left:4px;width:90px;}
и в jsp
<div class="styleT" id="inputT" style="padding-left:0px;">
здесь не берется padding-left:4px;
. Он принимает класс styleT
, за исключением padding-left: 4px;.
Будет padding-left:0px;
.
Вот простое решение jQuery.
$(document).ready(function() {
$('div').css('display','block');
})
Правила приоритета, когда два свойства CSS применяются к одному и тому же узлу:
!important
удары not- !important
. Если одинаково! Важно,...
Атрибут style
превосходит CSS в файле. Если оба находятся в файлах CSS...
идентификатор в селекторе CSS не бьет идентификатор. И больше идентификаторов бить меньше. (и вы думали, что в селекторе нет причин для двух идентификаторов.) Если количество идентичных идентификаторов...
Классы или атрибуты, такие как [name]
в селекторе, подсчитывают их; больше бьет меньше. Если все они одинаковы...
имена тегов, такие как span
или input
, больше ударов меньше.
Таким образом, вы видите встроенный !important
это наивысший приоритет.
Вы можете увидеть этот пример! Есть несколько правил для селектора CSS. Самый сильный селектор встроенный (если одинаковый уровень с/без! Важный). Следующие: id, class и т.д. Поэтому, если тег уже стилизован встроенным css с помощью! Important, у вас просто есть способ: использовать Javascript для изменения.
var pid = document.getElementById('pid');
var button = document.getElementById('button');
button.addEventListener('click', function(){
pid.style.color = 'lime';
});
p{color:violet !important;}
*{color:blue !important;}
html *{color:brown !important;}
html p{color:lighblue !important;}
.pclass{color:yellow !important;}
#pid{color:green !important;}
<p class="pclass" id="pid" style="color:red !important;">
Hello, stylize for me !
</p>
<button id='button'>Change color by JS</button>