すべての CSS selectors_html/css_WEB-ITnose の意味と互換性を知っていますか?

WEB フロントエンド開発者として、各 CSS セレクターの意味と互換性を正確に理解することが、進歩への第一歩となります。

CSS セレクターは、要素セレクター、関係セレクター、属性セレクター、擬似クラス セレクター、擬似オブジェクト セレクターの 5 つのカテゴリに分類できます。

1. 要素セレクター

4 つの要素セレクターがあります:

2. 関係セレクター

4 つの関係セレクター:

3. 属性セレクター

合計 7 つの属性セレクターがあります:

注: ここでの「文字列」には、スペースで区切られた単語と文字列全体が含まれます。例: 「val」で始まる「文字列」には、「val」、「val abc」、「valabc」が含まれます。

4. 疑似クラス セレクター

23 の疑似クラス セレクターがあります (印刷スタイルに関係なく):

5. 5つの疑似オブジェクトがありますセレクターの合計 各:

注:

CSS3 は、疑似オブジェクト セレクターの前の単一コロンを二重コロンに変更しますが、以前の記述方法は引き続き有効です。 E:before と E:after は content 属性と一緒に使用し、content の値を引用符で囲む必要があります。