さまざまな CSS セレクターの詳細な紹介-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

さまざまな CSS セレクターの詳細な紹介

零下一度

Jun 27, 2017 am 10:17 AM

cssセレクタ

1. 基本セレクター
1. * ユニバーサル要素セレクター、任意の要素に一致します
2. E タグセレクター、E タグを使用するすべての要素に一致します
3.クラス属性に情報を含む 
4. #footer ID セレクター、ID 属性がフッター 
 と等しいすべての要素に一致します 
 2. 複数要素の組み合わせセレクター 
 5. 複数要素セレクター、すべての E 要素または F 要素に同時に一致します。E と F はカンマで区切られます 
6. E F 子孫要素セレクター、E と F の間で、E 要素の子孫であるすべての F 要素に一致します。スペース 
7. E > F 子要素セレクター、E 要素 
 のすべての子要素 ​​F に一致します。E + F 隣接要素セレクター、E 要素要素 F の直後のすべての兄弟要素に一致します。 3. 
CSS 2.1 属性セレクター
9. E[att] その値に関係なく、すべての E 要素と att 属性を一致させます。 (注: ここでは、「[cheacked]」のように E を省略できます。以下と同じです。) 
10. E[att=val] att 属性が「val」に等しいすべての E 要素と一致します  11. E[att~=val] 
は、att 属性に複数のスペースで区切られた値があり、そのうちの 1 つが「val」に等しいすべての E 要素と一致します 12 E[att|=val] 
はすべての att と一致します。複数の連続した値を持つ属性ハイフンで区切られた値、値のいずれかが「val」で始まる E 要素は、主に「en」、「en-us」、「en-gb」などの lang 属性に使用されます。 、など。  
 IV. CSS 2.1 の疑似クラス
13. E:first-child は親要素の最初の子要素と一致します
14。クリックされていません
15. E:visited クリックされたすべてのリンクと一致します
16。E:active マウスが押されているが放されていないE要素と一致します
17。 E:focus は、現在のフォーカスを持つ E 要素と一致します
19。 E:lang(c) は、lang 属性が c に等しい E 要素と一致します。 
5.  CSS 2.1 擬似要素 
20 は、E 要素
21 の最初の文字と一致します。 22. E:before in E 要素の前に生成されたコンテンツを挿入します 
23. E:after 
E 要素の後に生成されたコンテンツを挿入します  6.  兄弟要素の CSS 3 ユニバーサル セレクター 
24. E ~ F E 要素の後の任意の兄弟 F 要素と一致します 
 7. CSS 3 属性セレクター 25. E[att^="val"] 
属性 att 要素E[att$="val"] 属性 att の値は「val」で終わります 
27。 E[att*="val"] 属性 att の値には「val」が含まれます。文字列要素 
 
 8. CSS 3 のユーザー インターフェイスに関連する疑似クラス 
28. E:enabled フォーム内のアクティブ化された要素と一致します
29。 
30. E:checked は、フォーム内の選択された radio (ラジオ ボックス) または checkbox (チェックボックス) 要素と一致します
31。 E::selection は、ユーザーが現在選択している要素 
 と一致します。
9 親要素の n 番目の子要素、最初の番号は 1
34 E:nth-last-child(n) は親要素の最後から n 番目の子要素と一致します、最初の番号は1
 35. E:nth-of-type(n) :nth-child() と似ていますが、同じタグ 36 を使用する要素のみに一致します。 
:nth-last-child() に似ていますが、同じタグ 37 を使用する要素のみと一致します。 E:last-child は、親要素の最後の子要素と一致します。これは、
:nth-last と同等です。 -child (1)38。E:first-of-type は、親要素の下で同じタグを使用する最初の子要素と一致します。これは、
:nth-of-type(1)39 と同等です。 :last-of-type は、親要素の下で同じタグを使用している最後の子要素と一致します。これは、
:nth-last-of-type(1)40 と同等です。親要素の下に 1 つ 子要素、:first-child:last-child または:nth-child(1):nth-last-child(1)
41 に相当します。一致する親要素の下にある同じ型 タグの唯一の子要素。:first-of-type:last-of-type または:nth-of-type(1):nth-last-of-type(1) と同等)
42. E: 空  子要素を含まない要素と一致します 
 10. 
CSS 3 アンチ選択疑似クラス 43。 E: not(s) 一致は現在のセレクターのどの要素にも一致しません 
 
 11. :target 
CSS 3 の疑似クラス 44. E:target  をクリックした後の効果と一致します。ドキュメント内の特定の 
「ID」
以上がさまざまな CSS セレクターの詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

HTML：それはプログラミング言語か何か他のものですか？Apr 15, 2025 am 12:13 AM

htmlisnotaprogramminglanguage; itisamarkuplanguage.1）htmlStructuresandformatswebcontentusingtags.2）ItworkswithcsssssssssdjavascriptforInteractivity、強化を促進します。

HTML：Webページの構造の構築Apr 14, 2025 am 12:14 AM

HTMLは、Webページ構造の構築の基礎です。 1。HTMLは、コンテンツ構造とセマンティクス、および使用などを定義します。タグ。 2. SEO効果を改善するために、などのセマンティックマーカーを提供します。 3.タグを介したユーザーの相互作用を実現するには、フォーム検証に注意してください。 4. JavaScriptと組み合わせて、動的効果を実現するなどの高度な要素を使用します。 5.一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれ、検証ツールが必要です。 6.最適化戦略には、HTTP要求の削減、HTMLの圧縮、セマンティックタグの使用などが含まれます。

テキストからウェブサイトへ：HTMLの力Apr 13, 2025 am 12:07 AM

HTMLは、Webページを構築するために使用される言語であり、タグと属性を使用してWebページの構造とコンテンツを定義します。 1）htmlは、などのタグを介してドキュメント構造を整理します。 2）ブラウザはHTMLを分析してDOMを構築し、Webページをレンダリングします。 3）マルチメディア関数を強化するなど、HTML5の新機能。 4）一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれます。 5）最適化の提案には、セマンティックタグの使用とファイルサイズの削減が含まれます。

HTML、CSS、およびJavaScriptの理解：初心者向けガイドApr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、

HTMLの役割：Webコンテンツの構造Apr 11, 2025 am 12:12 AM

HTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。