IEと現代のブラウザの下でCSSの!importantプロパティの使用
基本概念:
•同じスタイル定義でカッコ
{...}内(同じセレクタのセレクタ内):
Firefox、opera(現代ブラウザ)優先受領
ieは無視します!important文字列.
•同じスタイルではないかっこ
落札あり!importantのスタイルペア
すべてのブラウザが優先的に受け取ります.
例1、同じセレクタのセレクタ内:
上記の基本概念に基づいて、結論を出した.
ieの下で、同じ
で、!importantは無視され、フォントの色は緑です.
Firefoxおよびモダンブラウザで、設定!importantでは、この属性値が優先され、フォント色が赤になります.
例2、異なるセレクタのセレクタ内:
上記の基本概念に基づいて、結論を出した.
異なるセレクタのセレクタ内には、
!importantのスタイルペア
すべてのブラウザが優先的に認識されると、ieとFirefox(現代ブラウザ)の下でフォントが赤になります.
例3!importantには保護の役割もあります.
保護が必要なプロパティの後ろに挿入すると、プロパティベースのプロパティで上書きされないようにします.
例:
通常、id名#nav付きの要素の1つのリンクは、ラベルスタイルよりも具体的に多く含まれているため、ビット赤になります.importantでは、この属性が永遠に勝つと、ieと現代ブラウザの下でフォントがteal色で表示されます.
•同じスタイル定義でカッコ
{...}内(同じセレクタのセレクタ内):
Firefox、opera(現代ブラウザ)優先受領
ieは無視します!important文字列.
•同じスタイルではないかっこ
落札あり!importantのスタイルペア
すべてのブラウザが優先的に受け取ります.
例1、同じセレクタのセレクタ内:
.class
{
/* , !important */
color:red !important;
/* */
color:green;
}
上記の基本概念に基づいて、結論を出した.
ieの下で、同じ
で、!importantは無視され、フォントの色は緑です.
Firefoxおよびモダンブラウザで、設定!importantでは、この属性値が優先され、フォント色が赤になります.
例2、異なるセレクタのセレクタ内:
.class1
{
/* , !important */
color:red !important;
}
.class2
{
/* */
color:green;
}
上記の基本概念に基づいて、結論を出した.
異なるセレクタのセレクタ内には、
!importantのスタイルペア
すべてのブラウザが優先的に認識されると、ieとFirefox(現代ブラウザ)の下でフォントが赤になります.
例3!importantには保護の役割もあります.
保護が必要なプロパティの後ろに挿入すると、プロパティベースのプロパティで上書きされないようにします.
例:
#nav a
{
color:red;
}
a
{
/* !important( IE ) color #nav a color */
color:teal !important;
}
通常、id名#nav付きの要素の1つのリンクは、ラベルスタイルよりも具体的に多く含まれているため、ビット赤になります.importantでは、この属性が永遠に勝つと、ieと現代ブラウザの下でフォントがteal色で表示されます.