ホームページ > 記事 > ウェブフロントエンド > CSS の！ important_html/css_WEB-ITnose
CSS の！ important_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:38:051417ブラウズ
今日コードを書いていると、! important に関する質問に遭遇しました。この概念を今までよく理解していなかったので、今日は情報を調べてまとめてみました。
CSS の原則:
異なる場所に記述された CSS には異なる優先順位があり、.css ファイル内の定義 < 要素スタイル内の属性があることはわかっていますが、! important を使用すると、次のようになります。違うものになる。
まず、次のコードを見てみましょう:
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>测试Css中的!Important区别</title> </head> <style type="text/css">.testClass{ color:blue !important;}</style><body> <div class="testClass" style="color:red;"> 测试Css中的Important </div></body></html> 要素のスタイルに testClass クラスの定義がありますが、上記の CSS 定義で ! important で修飾された定義が最も高い値を持ちます。 IE6 ～ 10 または Firefox と Chrome ではパフォーマンスが安定しており、どちらも青色で表示されます。
この状況は、ie6 が ! important を認識できることも示していますが、これは ie6 の欠陥です。以下のような書き方をするとie6では認識されません:
.testClass{ color:blue !important;color:red;} このようにie6で表示すると赤字で表示されます。
もちろん、次のメソッドを使用して ie6 に認識させることもできます。 IE6の表示を青色にすることもできます。
上記の例は、! important を使用した CSS 定義が最も高い優先度を持つことを示しています。 IE6ではちょっとしたバグがあるだけですが、書き方に注意すれば簡単に回避できます。
著作権表示: この記事はブロガーのオリジナル記事であり、ブロガーの許可なく複製することはできません。