web-dev-qa-db-ja.com

インライン！importantをオーバーライドできますか？

あなたが持っている場合

<div style="display: none !important;"></div>

スタイルシートでそれをオーバーライドして表示する方法はありますか？

できればこれに似たものを使用してください：

div { display: block !important; }
htmlcsscss-specificity
59
Jeffrey Basurto

まず、一般的にインラインスタイルをオーバーライドできるをオーバーライドできる：

.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のシナリオでは、inline!important。

72
o.v.

!importantがある場合、インラインCSSをオーバーライドできません。外部CSSファイルのスタイルよりも優先順位が高くなります。

ただし、後でいくつかのアクションを変更する場合は、少しのJavaScriptを使用できます。

22
Shakti Singh

!importantを持つインラインCSSは優先順位が高いためオーバーライドできませんが、JavaScriptを使用すると、目的を達成できます。

7
Ahsan Rathod

!importantを持つインラインスタイルをオーバーライドすることはできません。最初の設定はインラインスタイルです。

例えば：クラスがあります

.styleT{float:left;padding-left:4px;width:90px;}

そしてJSPで

<div class="styleT" id="inputT" style="padding-left:0px;">

ここではpadding-left:4px;を使用しません。padding-left：4px;を除き、クラスstyleTを使用します。 padding-left:0px;があります。

5
ıllıllı lק ıllıllı

簡単なjQueryソリューションを次に示します。

$(document).ready(function() { 
$('div').css('display','block');
})
3
sameeuor

2つのCSSプロパティが同じノードに適用される場合の優先ルール：

  • !importantビートではありません-!important。同様に重要な場合、...

  • style属性はファイル内のcssに勝ります。両方がcssファイルにある場合...

  • cSSセレクターのIDはIDに勝りません。そして、より多くのIDが勝ちます。 （そして、セレクターに2つのIDがある理由はないと思っていました。）同じIDカウントなら...

  • クラス、またはセレクターの[name]などの属性は、それらをカウントします。より少ないビート。それらがすべて同じ場合...

  • spanやinputなどのタグ名、より少ないビート。

したがって、インライン!importantが最高の優先順位であることがわかります。

0
OsamaBinLogin

この例を見ることができます！ CSSセレクターにはいくつかのルールがあります。最も強力なセレクターはインラインです（！importantの有無にかかわらず同じレベルの場合）。次はid、classなどです。タグが既に！importantを使用してインラインcssで様式化されている場合は、Javascriptを使用して変更するだけです。

var pid = document.getElementById('pid');
var button = document.getElementById('button');
button.addEventListener('click', function(){
  pid.style.color = '';
});
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>

ご覧のとおり、インラインcssによるスタイルが削除され、IDが最強のセレクターになりました！

0
Freelancer