CSS セレクターの優先順位と効率の最適化_html/css_WEB-ITnose

CSS セレクターの優先順位と効率の最適化

日付: 2015 年 8 月 7 日

作成者: HaoyCn

この記事は、インターネット上のさまざまな場所から CSS セレクターに関する記事を収集し、1 つの記事にまとめています。

各種セレクターの優先度

重要宣言 1,0,0,0

IDセレクター 0,1,0,0

クラスセレクター 0,0,1,0

疑似クラスセレクター 0,0,1 ,0

属性セレクター 0,0,1,0

タグセレクター 0,0,0,1

疑似要素セレクター 0,0,0,1

ワイルドカードセレクター 0 ,0,0,0

In上記のセレクターは、さらにテスト済みです

属性セレクター = 擬似クラス セレクター (最後のものを適用)

:last-child{color:red;}[desc]{color:green;}

擬似クラス セレクター> 隣接セレクター

:last-child{color:green;}p ~ p{color:blue;}

隣接セレクター = 子セレクター = 子孫セレクター (最後のものを適用)

p~p{color:red;}body p{color:blue;}body > p{color:green;}

子孫タグセレクター

p ~ p{color:blue;}p{color:green;}

スタイル位置の影響

c9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f265927 と同じであり、アプリケーションは f2c37e1b8ddaac18c2fc2d5f9f9d9628 タグと 439940bdb518e9fd892bed955b59e35a タグ

要素 属性は、上記の 2 つのスタイルよりも優先されます

は、上記の 2 つのスタイルよりも優先されます

!

備考

! important IE6 のバグ: 同じグループの CSS プロパティでは、! important は機能しません。例:

#selector{color:blue !important;color:green;}

セレクターの効率

セレクターの読み取りの原則は右から左です。したがって、右側の最後のセレクターはキー セレクターと呼ばれ、効率に決定的な影響を与えます。

以下の効率ランキングは @Steve Souders によって提供されています。

IDセレクター

クラスセレクター

タグセレクター

隣接セレクター

子セレクター

子孫セレクター

ワイルドカードセレクター

属性セレクター

擬似クラスセレクター

優先度が高いからといって必ずしも効率が高いとは限りません

例: #id .class と div#id p.class 前者は後者より効率的であり、後者の優先度は前者よりも高くなります。効率と優先順位のバランスをとる必要があります。

最適化に関する提案

次の URL には多くの提案が含まれています:

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficie...

本質は次のように要約されます。

ワイルドカードの使用を避ける

タグ名またはクラス名を使用して ID ルールを変更しないでください: ルールが ID セレクターをキー セレクターとして使用する場合は、ルールにタグ名を追加しないでください。 ID 自体は一意であるため、タグ名を追加すると照合効率が不必要に低下します。

クラスの変更にタグ名を使用しないでください: タグと比較して、クラスはより固有です。

できるだけ具体的にするようにしてください: 非効率の最も単純かつ粗雑な原因は、ラベルに多すぎるルールを使用することです。要素にクラスを追加すると、より迅速にクラスに分割できるため、ルールがタグを照合するのにかかる時間を短縮できます。

子孫セレクターとサブセレクターについて: 子孫セレクターを使用する必要がある場合は、代わりにサブセレクターを使用することをお勧めします。ただし、サブセレクターには決してサブを含めないでください。 -セレクター。

継承を活用する: 一般的なコンテンツでスタイルを宣言する必要はありません。