CSS3で追加された疑似クラスとは何ですか?またその機能は何ですか?

この記事では、CSS3で追加された疑似クラスとは何なのか、そしてその機能は何なのかを説明します。困っている友人は参考にしていただければ幸いです。

1. 疑似クラスと疑似要素

CSS 疑似クラス: 特定のセレクターに特殊効果を追加するために使用されます。

CSS 疑似要素: 特定のセレクターに特殊効果を追加するために使用されます。擬似要素は要素の子要素を表しますが、この子要素は論理的には存在しますが、ドキュメント ツリーには実際には存在しません。

疑似要素	関数
::first-letter	テキストの最初の文字にスタイルを追加します
::first-line	テキストの最初の行にスタイルを追加します
::before	要素の前に何かを挿入します
::after	要素の後に何かを挿入します

疑似クラスの効果は、実際のクラスを追加することによって実現できます。疑似要素は実際の要素を追加することで実現する必要があるため、一方を疑似クラス、もう一方を疑似要素と呼びます。

疑似クラスと疑似要素を区別するために、CSS3 では、疑似クラスは 1 つのコロンで表され、疑似要素は 2 つのコロンで表されると明確に規定されています。ただし、互換性の問題により、ほとんどの場合は依然として単一のコロンが使用されます。ただし、互換性の問題に関係なく、この 2 つを区別して記述する際には、最善の努力を払う必要があります。

CSS3 疑似クラスには単一コロン (:) が使用され、CSS3 疑似要素には二重コロン (::) が使用されます。疑似要素は、二重コロンと疑似要素の名前で構成されます。ただし、ブラウザは、CSS3 で導入された新しい疑似要素をサポートする一方で、first-line、:first-letter、:before、:after などの既存の古い疑似要素の記述方法を同時にサポートする必要があります。単一コロンの記述はサポートされなくなりました。

2. CSS3 は新しい疑似クラスを追加します

新しい疑似クラス	関数
p:first-of-type	その最初の 要素に属する各要素を選択します親要素 要素。
p:last-of-type	親要素の最後の 要素をすべて選択します。
p:only-of-type	親の唯一の 要素をすべて選択します。
p:only-child	親要素の唯一の子要素である各 要素を選択します。
p:nth-child(n)	親要素の n 番目の子要素であるすべての 要素を選択します。
p:nth-last-child(n)	親要素の下から n 番目の子である各 要素を選択します。
p:nth-of-type(n)	親の n 番目の 要素に属するすべての 要素を選択します。
p:nth-last-of-type(n)	親要素の下から n 番目の 要素をそれぞれ選択します。
p:last-child	親要素の最後の子であるすべての 要素を選択します。
p:empty	子要素を持たないすべての 要素 (テキスト ノードを含む) を選択します。
p:target	現在アクティブな 要素を選択します。
:not(p)	は、 要素ではないすべての要素を選択します。
:enabled	フォームコントロールの使用可能なステータスを制御します。
:disabled	フォームコントロールの無効状態を制御します。
:checked	ラジオボタンまたはチェックボックスがチェックされています。

疑似クラス	関数
:hover	マウスホバーした要素にスタイルを追加
:active	アクティブ化された要素にスタイルを追加
: フォーカス	追加フォーカスされた要素にスタイルを追加
:link	未訪問のリンクにスタイルを追加
:visited	訪問済みのリンクにスタイルを追加
:first-child	の最初の子要素にスタイルを追加します。 element
:lang	指定された要素で使用される言語を定義します

関連する推奨事項:

CSS セレクターにはどのような種類がありますか? CSSでよく使われるセレクターを簡単に紹介します

CSSとは何ですか? 3 つの CSS スタイルとテキスト属性の紹介

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