CSSの「:」と「::」の違いは何ですか?

違い: 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 の要素に適用されます。

(学習ビデオの推奨: css ビデオ チュートリアル )

疑似要素

特殊な状態の要素の疑似クラスとは異なり、疑似要素これは、擬似クラスよりも深いレベルで要素内の特定のコンテンツに対して動作するため、動的性質は擬似クラスよりもはるかに低くなります。

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

::first-letter

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

::first-line

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

::before

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

::after

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

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