CSS疑似クラスとは何ですか?

css 疑似クラスには、「:link」、「:visited」、「:hover」、「:active」、「:focus」、「:lang()」、「not()」が含まれます。 「:root」、「:first-child」、「:last-child」、「:empty」など。

このチュートリアルの動作環境: Windows 7 システム、CSS3 バージョン、Dell G3 コンピューター。

CSS 疑似クラスは、セレクターの特殊効果を追加するために使用されます。これらは、特定の状態にある既存の要素に対応するスタイルを追加するために使用されます。この状態は、ユーザーの動作に基づいて動的に変化します。

例: ユーザーが指定された要素の上にマウスを移動すると、:hover を使用してこの要素の状態を説明できます。これは一般的な CSS に似ており、既存の要素にスタイルを追加できますが、 DOM ツリーでは、スタイルは記述された状態でのみ要素に追加できるため、疑似クラスと呼ばれます。

疑似クラスは動的である可能性があり、ユーザーがドキュメントを操作するときに要素が疑似クラスを取得したり失ったりする可能性があるように感じられます。例外は、ドキュメント ツリーから推論できる「:first-child」と、ドキュメント ツリーから推論される場合がある「:lang」です。

その機能はクラスに似ていることがわかりますが、ドキュメントの外部での抽象化に基づいているため、疑似クラスと呼ばれます。

css 疑似クラス セレクター リスト

#E:activeCSS2/CSS1NoneCSS2/CSS1 疑似クラス セレクター E:active、要素を設定ユーザーによってアクティブ化されたときのスタイル (マウスのクリックとリリースの間に発生するイベント)。 #E:focusE:lang()E:not()E:root#E:first-childCSS2NoneCSS2 疑似クラス セレクター E:first-child は親と一致しますelement 最初の子要素 ​​E. CSS3CSS3CSS3CSS3CSS2CSS3CSS3CSS3CSS3#E:emptyCSS3NoneCSS3 疑似クラス セレクター E:empty は子要素 (テキストを含む) に一致しませんノード) 要素 E。 E:checkedCSS3NoneCSS3 疑似クラス セレクター E:checked はユーザーの選択された状態と一致しますインターフェイス要素 E。 (ラジオとチェックボックスの入力タイプを持つフォーム要素の場合)E:enabledCSS3NoneCSS3 擬似クラス セレクター E:enabled は、ユーザー インターフェイス上で有効な状態にある要素 E と一致します。 E:disabledCSS3NoneCSS3 疑似クラス セレクター E:disabled は、ユーザーの無効な状態と一致します。インターフェイス要素 E。 E:targetCSS3NoneCSS3 疑似クラス セレクター E:target は、 が指す E 要素と一致します。関連する URL 。 @page:firstCSS2NoneCSS2 疑似クラス セレクター @page:first は最初にページ コンテナーを設定しますページで使用されるスタイル。 @page ルールでのみ使用されます@page:leftCSS2NoneCSS2 疑似クラス セレクター @page: left は、ページ コンテナがガターの左側にあるすべてのページで使用されるスタイルを設定します。 @page ルールでのみ使用されます@page:rightCSS2NoneCSS2 はオブジェクト セレクター @page です。 right は、ページ コンテナがガターの右側にあるすべてのページに使用されるスタイルを設定します。 @page ルールにのみ使用されますcss ビデオ チュートリアル)

プロパティ プロパティ	CSS バージョン バージョン	親から継承 継承	説明 はじめに
E:link	CSS1	None	CSS1 疑似クラス セレクター E :link、ハイパーリンクにアクセスする前に、ハイパーリンクのスタイルを設定します。
E:visited	CSS1	None	CSS1 疑似クラス セレクター E:visited、ハイパーリンク a を設定しますリンク アドレスは古いスタイルでアクセスされました。
E:hover	CSS2	None	CSS2/CSS1 疑似クラス セレクター E:hover、要素を設定しますマウスオーバーでスタイルを設定します。
CSS2/CSS1	None	CSS2/CSS1 疑似クラス セレクター E:focus、要素を設定入力フォーカスが発生したときのスタイル (要素の onfocus イベントが発生したとき)。
CSS2	None	CSS2 疑似クラス セレクター E:lang() は、特別な使用法を使用して一致します。言語の E 要素。
CSS3	None	CSS3 疑似クラス セレクター E:not() は一致しませんcontains s セレクターの要素 E。
CSS3	None	CSS3 疑似クラス セレクター E:root は、ドキュメントのルート要素。
			#E:last-child
None	CSS3 疑似クラス セレクター E:last-child は親と一致しますelement 最後の子要素 ​​E.		E:only-child
None	CSS3 たとえば、セレクター E:only-child は、親要素 唯一の子要素 ​​E.		E:nth-child(n)
None	CSS3 疑似クラス セレクター E:nth-child (n) 親要素の n 番目の子要素 ​​E と一致します。		E:nth-last-child(n)
None	CSS3 疑似クラス セレクター E:nth -last-child(n) は、親要素の下から n 番目の子要素 ​​E と一致します。		E:first-of-type
None	CSS3 疑似クラス セレクター E:first-of- type は、同じ型の最初の兄弟要素 E と一致します。		E:last-of-type
None	CSS3 疑似クラス セレクター E:last-of- type は、同じ型の最後の兄弟要素 E と一致します。		E:only-of-type
None	CSS3 疑似クラス セレクター E:only-of- type は、同じ型の唯一の兄弟要素 E と一致します。		E:nth-of-type(n)
None	CSS3 疑似クラス セレクター E:nth -of-type(n) は、同じ型の n 番目の兄弟要素 E と一致します。		E:nth-last-of-type(n)
None	CSS3 疑似クラス セレクター E :nth-last-of-type(n) は、同じ型の最後から 2 番目の n 番目の兄弟要素 E と一致します。
			(学習ビデオ共有:

以上がCSS疑似クラスとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。