CSS における !重要 の役割

! important は CSS1 で定義された構文で、その機能は指定されたスタイル ルールの適用優先​​度を高めることです。構文形式 { cssRule ! important }

{*cssRule ! important } この CSS ルールは、Web ページ制作において非常に一般的になりました。これまで、私の理解は実際に理解することなく「ブラウザ認識段階」にとどまっていました。それを勉強する必要がありましたが、今では状況が変わりました。いくつかの例を見てみましょう。

例 1:

CSS

#Box {

color: red ! important;

color: blue;

padding: 30px;

width : 300px;

border:1pxソリッドピンク;

}

Html

ブラウザが異なると、このテキスト行の色も異なるはずです。

すると、Firefox、Opera、Chrome など、この構文をサポートするブラウザでは、! important の優先度がわかり、フォントの色が赤で表示されますが、IE では青で表示されます。 IE ブラウザは ! important を認識しないため、IE 以外のブラウザは ! important を認識し、! important の優先順位が高くなります。次に、次の例を見てください。CSS スタイルの color 属性の順序を入れ替えるだけで、HTML コードの部分は変更されません。どうなるでしょうか。

CSS

#Box {

color: blue;

color: red !重要;

padding: 30px;

width : 300px;

border:1pxソリッドピンク;

}

それではこの場合、IE ブラウザで認識されるか、IE 以外のブラウザで認識されるかに関係なく、文字色は赤色で表示されます。 IE ブラウザは ! important を認識しませんが、「color: red ! important;」という文の color:red は認識します。したがって、IE では、ブラウザは最初に「color: blue」を認識し、次に「color: red ! important;」で color: red を認識し、前の「color:

blue」をカバーするため、最終的なフォントの色は「All」になります。は赤色で表示されます。