CSS の! important_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-24 11:38:051457ブラウズ

今日コードを書いていると、! 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ではちょっとしたバグがあるだけですが、書き方に注意すれば簡単に回避できます。




著作権表示: この記事はブロガーのオリジナル記事であり、ブロガーの許可なく複製することはできません。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。