CSSセレクターの優先順位を深く理解する

CSS には、クラス セレクター、タグ セレクター、ID セレクターなど、多くのセレクターがあります。セレクターごとに優先順位も異なります。今日は、CSS セレクターの優先順位について説明します。順序と !重要 の使い方を参考にしていただければ幸いです。

1. !重要は、最も高い優先度 を示します。 IE6 ブラウザが !重要 を認識しません。

例:

通常、以下に記述されたスタイルは、上記のスタイルよりも優先されます。

demo1{
color:red;
color:green; /*绿色的优先级高于红色，所有浏览器都会显示绿色*/
}

! important を追加すると、IE6 の優先度が高くなります。比較的愚かで私にはわかりません。

demo2 {
color:red !important; /*除了ie6，其他浏览器会认为红色优先级高，显示红色字体*/
color:green; /*ie6浏览器则顺序读取css所以显示绿色*/
}

ただし、ie6 は ! important の優先度を認識しませんが、ie6 が ! important を含む style 属性を認識しないという意味ではないことに注意してください。

demo3{
color:red;
color:green !important; /*包括ie6，所有浏览器都显示绿色字体，ie6只是不认识优先级罢了*/
}

2. CSS (Cascading Style Sheets) カスケード スタイル シート 実際のアプリケーションでは、通常 3 つのカスケード メソッドがあります。

優先順位: インライン スタイル シート (タグ内) > 埋め込みスタイル シート (現在のファイル内) > 外部スタイル シート (外部ファイル内)。

1. 外部スタイル (複数の Web ページに適用)

外部スタイル シートでは、CSS コードは別のファイルとして保存されます。たとえば、style.css ファイルにはすべてのスタイルが含まれます。 。 HTML での外部カスケードは、2cdf5bf648cf2f33323966d7f58a7f3f タグまたは @import ステートメントを使用して導入されます。

サンプル コードは次のとおりです。

<link rel="stylesheet" href="style.css" type="text/css" /> //link 链接
@import url("style.css"); //@import 导入

2cdf5bf648cf2f33323966d7f58a7f3f @import と @import の類似点と相違点については、記事「

2.現在のページに適用されます)

ポータル Web サイトの CSS コードは通常、インライン スタイル (インライン スタイル) として知られ、c9ccee2e6ea535a969eb3f532ad9fe89 タグを使用してスタイルを内部として定義します。ブロックオブジェクト。

サンプル コードは次のとおりです。

<style type="text/css">
    body{font-family:Arial,Helvetica,sans-serif;}
</style>

インライン CSS は、HTTP リクエストを効果的に削減し、ページのパフォーマンスを向上させ、サーバーの負荷を軽減します。ブラウザーは CSS をロードした後にのみページをレンダリングできるため、CSS ファイルが読み取られずにページが裸で実行されるのを防ぐことができます。

3. 埋め込み (特定のタグに適用)

CSS を記述する最も基本的な方法は、変更されたマークアップ要素にコードを直接追加することです。

サンプル コードは次のとおりです。

<div style="font-family:Arial,Helvetica,sans-serif;">饿了么</div>

これはより直感的ですが、ページ サイズが大幅に増加し、構造とパフォーマンスを分離するという設計思想に準拠していません。

3. 重みが異なる場合、ブラウザは重みに基づいてどのセレクター CSS スタイルを決定します。より高い重みを持つスタイルが使用されます。

重みルール: ラベル (P、スパン) の重みは 1、クラス セレクターの重みは 10、ID セレクターの重みは最大 100 です。

例:

div {color: red;} /*タグ、重みは 1*/

div スパン {color: green;} /*2 つのタグ、 Weight is 1 1=2*/

div>span {color: purple;} /*重みは上記と同じなので、近接原理が採用されます*/

.main { color : white;} /*クラス セレクター、重み値は 10*/

div span.warning {color: purple;} /*重み値は 1 1 10=12*/

#main .con p {color: yellow;} /*重みは 100 10 1=111*/

以上がCSSセレクターの優先順位を深く理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。