CSS スタイルの優先順位とカスケード順序に関する議論

一般的に：
[重要なフラグ1つ] > [特別なフラグ4つ] > 宣言順
!important > [ id > クラス > タグ ]
!important を使用すると、優先順位を最も高く、次にスタイルオブジェクト、次に id > class > タグの順に変更できます。また、宣言順で同じレベルのスタイルの後に表示されるスタイルは、優先順位が高くなります。

この奇妙なものを見てみましょう！重要

コードをコピー

コードは次のとおりです。

<スタイルタイプ="text/css">
div{背景: 赤 !重要; 背景: 青}
</スタイル>

IE6 を除き、他のブラウザでは背景が赤で表示されます。これはまさに !important の役割であり、つまり、私がここにいる限り、私が最も重要です。私に代わるものは何もありません。何が見えても、私たちはみんな同じです! 「重要」という英語の単語を追加しますか?とても鮮やかで適切です。 IE6 ではここで青い背景が表示されます。IE6 が !important をサポートしていないわけではなく、スタイル宣言の順序に従って以前のものを上書きします。このとき、!important を認識しなくなり、まったく認識しなくなります。これは最も人気のある IE6 ハックの 1 つです。次のように記述すると、背景は正常に赤で表示されます。

コードをコピー

コードは次のとおりです。

<スタイルタイプ="text/css">
div{背景: 青; 背景: 赤 !重要; }
</スタイル>

4ビットの特殊フラグ[0.0.0.0]を見てみましょう
左から右へ、位置が +1 されるたびに、前の段落は次の段落に対して議論の余地のない圧倒的な優位性を持ちます。後ろの桁の値がどれだけ大きくても、前の桁の値である 1 を超えることはできません。
1. インラインスタイル [1.0.0.0]
回答: <span id="demo" style="color:red"></span>
B: JS によって制御されるインラインスタイルオブジェクトもあります (document.getElementById("demo").style.color="red";)。
両者は同じレベルに属しますが、一般的に言えば、JS によって制御されるインラインスタイルの方が優先順位が高くなります。これは宣言の順序に関係しており、本質とは関係ありません。DOM 操作は、DOM ツリーが読み込まれた後に実行されることが多いためです。
2. IDセレクター[0.1.0.0]
3. クラス、属性、疑似クラスセレクター [0.0.1.0]
4. 要素タグ、疑似要素セレクター [0.0.0.1]
CSS セレクターの詳細については、W3C または CSS マニュアルを参照してください。ここでは詳細には触れません。
擬似クラスセレクターに注意してください
LVHA 疑似クラスでは、スタイルは LVHA の優先順位に従って右から左に上書きされ、順序が異なると効果が異なります。
a:link - デフォルトのリンクスタイル
a:visited - 訪問済みリンクのスタイル
a:hover - マウスホバースタイル
a:active - マウスクリックスタイル最後に、JS が !important でインラインスタイルを制御する現象について書いてみます。
通常のデモ1を見てみましょう:

コードをコピー

コードは次のとおりです。

<スタイルタイプ="text/css">
div{背景: 赤 !重要; 高さ: 20px;}
#demo1{ 背景: 緑;}
.demo1{ 背景:青;}
</スタイル>

コードをコピー

コードは次のとおりです。

コードをコピー

コードは次のとおりです。

最後に、背景が赤で表示されますが、これは問題にならないはずです。!important は、どこに配置されていても優先度を変更しますが、後続の JS コードでは優先度は変更されません。
--------------------------------------------------------------------------------
別のデモ2 :

コードをコピー

コードは次のとおりです。

<スタイルタイプ="text/css">
div{背景: 赤 !重要; 高さ: 200px;}
#demo2{ 背景: 緑;}
.demo2{ 背景: 青;}
</スタイル>

コードをコピー

コードは次のとおりです。

コードをコピー

コードは次のとおりです。

IE6,7では赤く表示される
FF2+は黄色で表示される
Opera9+は赤く表示される
Safariは黄色で表示される
--------------------------------------------------------------------------------
デモ3:

コードをコピー

コードは次のとおりです。

<スタイルタイプ="text/css">
div{背景: 赤 !重要; 高さ: 200px;}
#demo3{ 背景: 緑;}
.demo3{ 背景: 青;}
</スタイル>

コードをコピー

コードは次のとおりです。

コードをコピー

コードは次のとおりです。

IE6,7では赤く表示される
FF2+は黄色で表示される
Opera9+は黒く表示される
Safariは黒く表示される
--------------------------------------------------------------------------------
上記の2つの例を説明してください。
JS によって制御されるスタイルオブジェクトは、実際にはインラインスタイルであり、これは正しいです。

ただし、JS コントロールスタイルオブジェクト属性値に追加された !important に対して、3 つのブラウザーは異なる結果を返します。
IE: JS は、スタイルオブジェクト属性値を制御して、インラインスタイル属性値を完全に上書きします。Element.style.property="value !important" はサポートされていないため、エラーメッセージが表示されます: 無効なパラメーターです。
FF2+: Element.style.property="value !important" は完全にはサポートされていません。!important は無効であり、エラーは報告されません。インラインスタイル属性値に !important がない場合、完全に上書きされます。!important がある場合、インラインスタイル属性は最高の優先順位を持ち、JS 制御のスタイルの影響を受けません。
Opera9+: JS は、スタイルオブジェクト属性値を制御してインラインスタイル属性値を完全に上書きし、Element.style.property="value !important" をサポートします。
Safari: Element.style.property="value !important" をサポートします。インラインスタイル属性値に !important がない場合、完全に上書きされます。!important がある場合、インラインスタイル属性は最高の優先順位を持ち、JS 制御のスタイルの影響を受けません。

CSS スタイルの優先順位は、スタイルシートに出現する順序に基づきますか、それとも要素内でクラスまたは ID 値が宣言される順序に基づきますか?
以前は、クラス内で後で宣言された値の優先度が高いと考えていましたが、実際にはスタイルシートに表示される順序によって異なります。
コード：

コードをコピー

コードは次のとおりです。

<スタイルタイプ="text/css">
div{ 高さ: 200px; 幅: 200px; 背景: 赤; }
.b{ 背景: 緑; }
.a{ 背景: 青;}
</スタイル>
</head>
<本文>
<div class="ab" 2style="background:pink;">
</div>
</本文>

div のスタイルには青色のスタイルカラーが表示されます。
フロントエンド業界のあらゆる技術を学び、北京周辺のすべての都市を訪問します。それから私は生まれ育った場所に戻ります。なぜなら故郷とは親戚がいる場所だからです。

<<: MySQLの自動増分主キーの実装の詳細な説明

>>: CSS で text-align と margin: 0 auto を使用して中央に配置する例コード