CSS スタイルの !重要、*、_ 記号の詳細な説明-htmlチュートリアル-php.cn

CSS スタイルの !重要、*、_ 記号の詳細な説明

亚连

リリース： 2018-05-21 15:23:24

オリジナル

1660 人が閲覧しました

この記事では、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 の後に !payment が追加され、color:blue が最優先となり、単語「haha」は青になるはずです。具体的な効果は次のとおりです:

。

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

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

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

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

IE7 は * を認識できますが、!重要な部分は認識できます;

下線 "_"、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) IE8 以降のブラウザ (Firefox などを含む)

(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 であっても、両方の表示でパフォーマンスは一貫しています。青。

上記は私があなたのためにまとめたものです。

位置の詳細な解釈: IE6 での問題を修正

http ステータスコード 400 の戻り値を取得するフロントエンドの例_基本チュートリアル

IE9 より前のバージョンでの JavaScript のメモリリークの問題(詳細な概要)

以上がCSS スタイルの !重要、*、_ 記号の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。