CSS での ! important の使用を深く理解する-CSSチュートリアル-php.cn

CSS での ! important の使用を深く理解する

yulia

リリース： 2018-09-18 14:54:19

オリジナル

2112 人が閲覧しました

この記事では、CSS スタイルの優先順位に焦点を当て、主に CSS について説明します。重要なの使い方。この知識を学んでいる友達はぜひ見てください。お役に立てれば幸いです。

#! important は、開発者にスタイルの重みを増やす方法を提供します。 ! important は、このスタイルの属性と属性値を含むスタイル全体の宣言であることに注意してください。

<style type="text/css">
a{color:green!important;}
#main a{ color:blue;}
</style>
<div id="main">
<a>!important实例</a>
</div>

ログイン後にコピー

上記のコードの場合、重要な属性が追加されていない場合、ハイパーリンクは青色になりますが、重要を追加すると優先度が上がり、表示色が緑色になります。

<style>
#Box div{
     color:red;
}
.important_false{
     color:blue;
}
important_true{
     color:blue !important;
}
</style>
<div id="Box">
    <div class="important_false">这一行末使用important</div>
    <div class="important_true">这一行使用了important</div>
</div>

ログイン後にコピー

CSS コードの最初の行は、ボックス内のすべての div のフォントの色を赤に設定します。2 行目と 3 行目は、クラスを使用して、独自の div のフォントの色を青に再定義します。違いは重要です。は 2 行目の最後に使用され、! は 3 行目に使用されます。

デフォルトでは、class の優先度が id よりも低いため、2 行目で class を使用して独自のスタイルを再定義しても、この行は有効になりません。文字はまだ赤いです！
ただし、3 行目で important は優先度を上げるために (または強制再定義とみなされます) 使用されているため、ここの CSS が有効になり、この行のテキストは青色になります。

もう 1 つの注目すべき点は、スタイルが次のように記述されている場合です。

.testClass{ 
color:blue !important; color:red;
}

ログイン後にコピー

この書き方は IE6 では認識されません重要は赤で表示されますが、次の方法も使用できます。 IE6 !重要

.testClass{ 
color:blue !important; 
} 
.testClass{ 
color:red; 
}

ログイン後にコピー

を認識させる方法

以上がCSS での ! important の使用を深く理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。