CSS のセレクターの種類の概要と効率の比較例

この記事では主に、疑似クラスセレクターと疑似要素セレクターを含むCSSのセレクタータイプの概要と効率の比較を紹介します。必要な友達はそれを参照してください

CSSが加算的であることは誰もが知っています（同じ要素が複数で指定されます）。スタイル ルール）、継承（子孫要素は先行要素の一部のスタイルと属性を継承します）、優先度（CSS の重ね合わせと継承により、どのスタイル ルールが適用されるかを示す優先度が生成されます。最終的に、指定された要素に作用します） 1 つのルールに従うだけです。指定するほど優先度が高くなります。)

上記から、セレクターを指定するほど優先度が高くなることがわかります。 CSS のセレクター:

1. 基本セレクター (タグ セレクター、ユニバーサル セレクター、クラスおよび ID セレクター)

セレクター 説明CSS バージョン え タグ セレクター、E タグを使用するすべての要素と一致します *ユニバーサル要素セレクター、任意の要素と一致します .info クラス セレクターは、 class属性#footeridセレクターは、footerと等しいid属性を持つすべての要素と一致します。 2. 複数の要素の組み合わせセレクター（タグセレクター[グループセレクター]、子孫）セレクター、子セレクター、隣接セレクター)

セレクター説明CSS バージョンE、F複数要素セレクター、すべての E 要素または F に一致の要素同時に、E と F はカンマで区切られますE F にはセレクターが含まれ、E によって選択されたすべての要素と一致します 要素 E>F に含まれる F 要素子要素セレクター、E 要素のすべての子要素 ​​FE+F に一致、隣接するすべての要素セレクターに一致、兄弟要素 FE~F E 要素の後の兄弟 F タグと一致します 3. 属性セレクター

セレクター 説明CSSバージョンE[ [attribute] その値に関係なく、すべての E 要素をattribute属性と一致させます。 (注: ここでは、「[cheacked]」のように E を省略できます。以下と同じです。) 2.1E[attribute=value]は、attribute 属性が「value」に等しいすべての E 要素と一致します。 "2.1 E[attribute~=value]は、そのattribute属性がスペースで区切られた複数の値を持ち、そのうちの1つが「value」に等しいすべてのE要素と一致します2.1E[attribute] ^=value]E タグの後の兄弟 F タグと一致2.1E[attribute$=value]attribute 属性値に「value」が含まれるすべての E 要素と一致3 E[attribute *=value] 属性属性値が「value」で終わるすべての E 要素と一致します3 4. 疑似クラスセレクター

5. 疑似要素セレクター

セレクター説明CSSバージョンE:first-lineはすべてのEタグ内の最初の行と一致します2.1 E:最初に-文字はすべての E タグ内の最初の文字と一致します2.1E:beforeE タグの前に生成されたコンテンツを挿入します2.1E:afterE タグの後に挿入します生成されたコンテンツ2.1

ここで知っておく必要があるのは、ブラウザがセレクターをどのように読み取るかです。 Chris Coyier はかつて、「CSS の効率的なレンダリング」という記事の中で、「ブラウザはセレクターを読み取り、セレクターの右から左に読み取る原則に従います。つまり、ブラウザがセレクターを読み取る順序は Proceed です」と述べました。右から左へ。」

セレクターの最後の部分、つまりセレクターの右端の部分 (この例では、[タイトル] の部分) は「キー セレクター」と呼ばれ、セレクターの効率が決まります。高いのか低いのか。

それでは、キーセレクターをより効果的かつパフォーマンス的にするにはどうすればよいでしょうか?実際、重要なことは、「キー セレクターがより具体的であるほど、そのパフォーマンスが向上する」という 1 つの点を理解することです。

セレクターが与えた順序を見てみましょう。 :

1. ID セレクター (# myid)
2. クラス セレクター (.myclassname)
3. タグ セレクター (p, h1, p)
4. 隣接セレクター (h1+p)
5. サブセレクター (ul > li)
6. 子孫セレクター (li a) 7. ワイルドカード セレクター (*)
8. 属性セレクター (a[rel="external"]) 9. 疑似クラス セレクター (a:hover,li:nth- child)
上記 9 つのセレクターの効率は、高いものから低いものまでランク付けされています。ベースの ID セレクターの効率が最も高く、擬似クラス セレクターの効率が最も低くなります。

これらの例を比較して、誰が最も高い効率を持っているかを確認してみましょう: 1. #myId のスパン

2. スパン #myId

上記の例から、次の効率が上記の例よりも高いことがわかります。右端のキー セレクターが最も具体的であるため、上記のセレクターの優先順位にも準拠します。

以上がCSS のセレクターの種類の概要と効率の比較例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。