CSS スタイルの ! important、*、_ 記号の分析について-CSSチュートリアル-php.cn

CSS スタイルの ! important、*、_ 記号の分析について

不言

リリース： 2018-06-14 10:22:22

オリジナル

2097 人が閲覧しました

この記事では、CSS スタイルの !payment、*、および _ 記号の詳細な説明に関連する情報を主に紹介します。この記事が、必要な方の参考になれば幸いです。 CSS スタイルの _ シンボル

! important、*、および _ は実際にはすべてスタイルの優先順位を設定するために使用されます。ただし、順序を調整することでスタイルの優先順位を設定できます。しかし、それでも理解する必要があります。

異なる場所に記述された CSS は、.css ファイルの定義 < 要素スタイルの属性によって優先順位が異なることはわかっていますが、! important を使用すると状況が異なります。

まず、次のコードを見てみましょう:

<!DOCTYPE HTML> 
<html> 
<head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
  <title>!Important</title>  
</head>  
<body> 
  <p style="color:blue !important;color:red;"> 
    呵呵 
  </p> 
</body> 
</html>

ログイン後にコピー

元々、「haha」という単語は color:red と color:blue の後に 2 つの色で定義されており、デフォルトではこれら 2 つの単語は赤である必要があります。、最も近いフォントが使用されます color

ただし、 color:blue の後に ! important が追加されるため、 color:blue が最も優先され、単語「haha」は青になります。具体的な効果は次のとおりです:

。ただし、IE6 はスタイル属性の !重要な記号を認識しないため、元のスタイルの優先順位がそのまま維持され、「笑」という単語が赤色になります。

CSS スタイルの !重要、*、および _ 記号はすべて優先順位を設定するために使用されますが、これらの記号は次のように特定のブラウザーでのみ適用されます:

IE は標準ブラウザー (FF など) を認識できます。 * を認識できません;

IE6 は * を認識できますが、!重要は認識できません;

FF は * を認識できますが、重要です!アンダースコア「_」、IE6 は下線をサポートしますが、IE7 も Firefox も下線をサポートしません。

したがって、IE6、IE7、firefoxを区別するためにstyle属性で次の属性を定義できます:

background:orange;*background:green;_background:blue;

ログイン後にコピー

次のようにIE6、IE7、firefoxを区別することもできます:

background:orange;*background:green !important;*background:blue;

ログイン後にコピー

次のコード:

<!DOCTYPE HTML> 
<html> 
<head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
  <title>!Important</title>  
</head>  
<body> 
  <p style="background:orange;*background:green !important;*background:blue;"> 
    区分IE7、IE8、火狐 
  </p> 
  <p style="background:orange;*background:green;_background:blue;"> 
    区分IE7、IE8、火狐 
  </p> 
</body> 
</html>

ログイン後にコピー

実行中の効果は次のとおりです:

(1) IE7

(2) Firefox などを含む IE8 以上のブラウザ。

(3) IE6

ただし、この違いはデバッグにのみ使用でき、ブラウザを識別してこれらのブラウザの種類を決定する必要があります。

最後に、実際には、コードが次の場合、IE6 は ! important をスタイルで認識できないことを付け加えておきます:

<!DOCTYPE HTML> 
<html> 
<head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
  <title>测试Css中的!Important区别</title>  
  <style type="text/css"> 
    .testClass{  
    color:blue !important; 
    } 
  </style> 
</head> 
<body> 
  <p class="testClass" style="color:red;"> 
    测试Css中的Important 
  </p> 
</body> 
</html>

ログイン後にコピー

ie6-10 であっても、Firefox および Chrome であっても、パフォーマンスは一貫しています。青色を表示します。

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。