CSS における 1 つのコロンと 2 つのコロンは何を意味しますか?

1 つのコロンは疑似クラス、2 つのコロンは疑似要素です。

(推奨される学習: css クイック スタート )

疑似クラスは、ドキュメントの要素とは独立してスタイルを割り当てることができ、任意の要素に割り当てることができます。論理的には関数のクラスに似ていますが、事前に定義されており、ドキュメントツリーに存在せず、表現方法が異なるため、疑似クラスと呼ばれます。

擬似要素が制御する内容は要素が制御する内容と同じですが、擬似要素はドキュメントツリー上に存在せず実要素ではないため、擬似要素と呼ばれます。

疑似クラスには、:first-child、:link:、visited、:hover:、active:focus、:lang

疑似要素には、:first-line、:first-letter が含まれます。 、:before、:after

疑似クラスと疑似要素の違い:

疑似クラス

疑似クラス選択要素 要素の ID、クラス、属性などの静的な記号ではなく、要素の現在の状態、または要素の現在の特性に基づきます。

状態は動的に変化するため、要素が特定の状態に達すると疑似クラス スタイルを取得する場合がありますが、状態が変化するとこのスタイルは失われます。このことから、その機能はクラスの機能に似ていることがわかりますが、ドキュメントの外部での抽象化に基づいているため、疑似クラスと呼ばれます。

:link

疑似クラスは未訪問のリンクに適用され、:visited と相互に排他的です。

:hover

マウス ポインタが置かれている要素に疑似クラスが適用されます。

:active

疑似クラスは、クリックされたリンク、押されたボタンなどのアクティブ化された要素に適用されます。

:visited

疑似クラスは訪問済みのリンクに適用され、:link とは相互に排他的です。

:focus

疑似クラスは、キーボード入力フォーカスを持つ要素に適用されます。

:first-child

要素がページに最初に表示されるときに、疑似クラスが適用されます。

:lang

疑似クラスは、指定された lang の要素に適用されます。

擬似要素

特別な状態にある要素を対象とする擬似クラスとは異なり、擬似要素は要素内の特定のコンテンツとそのレベルで動作します。擬似クラスは 1 レベル深いため、擬似クラスよりもはるかに動的ではありません。

実際、疑似要素を設計する目的は、要素内容の最初の文字 (文字) と最初の行を選択し、特定の内容の前後を選択することですが、これは通常のセレクターでは実行できないことです。 。制御する内容は実際には要素と同じですが、要素に基づいて抽象化されただけであり、文書内には存在しないため、疑似要素と呼ばれます。

::first-letter

疑似要素のスタイルは、要素のテキストの最初の文字 (レター) に適用されます。

::first-line

擬似要素のスタイルは、要素のテキストの最初の行に適用されます。

::before

要素コンテンツの前に新しいコンテンツを追加します。

::after

要素コンテンツの最後に新しいコンテンツを追加します。

::before と ::after は、CSS コンテンツの生成でよく使用されます。

以上がCSS における 1 つのコロンと 2 つのコロンは何を意味しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。