CSS における 1 つのコロン (:) と 2 つのコロン (::) の違い

推奨: css ビデオ チュートリアル

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

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

擬似要素によって制御されるコンテンツは、要素によって制御されるコンテンツと同じですが、擬似要素はドキュメント ツリーに存在せず、実際の要素ではないため、擬似要素と呼ばれます。疑似要素。

疑似クラス には、:first-child 、:link:、visited、:hover:、active:focus、:lang# が含まれます。

##疑似要素 には、:first-line、:first-letter、:before、:after (Su Chen Xiaoyu によってコンパイルされた CSS2 内) が含まれます。 .0 中国語のマニュアルでは、:first-line と :first-letter が疑似クラスとしてリストされていますが、これは誤解です)

Web サイトが Webkit と互換性があるだけでよい場合の注意点、firefox、opera などのブラウザでは、疑似要素にはダブルコロンの記述方法を使用することをお勧めします。IE ブラウザ との互換性が必要な場合は、より安全です。 CSS2 の単一コロンの記述方法を使用します

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

##擬似クラス

擬似クラス選択要素は、次のような静的な記号ではなく、要素の現在の状態、または要素の現在の特性に基づいています。要素の id

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

#:link

疑似クラスは、

# と同様に、アクセスされていないリンクに適用されます。 ##:訪問済み

相互に排他的です。 :hover

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

#:active

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

:visited

疑似クラスは、# を使用して訪問済みのリンクに適用されます。 # #:link

相互に排他的です。

#:focus

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

:first-child

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

:lang

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

#特別な状態にある要素を対象とする疑似クラスとは異なり、疑似要素は特定のコンテンツを対象とします。動作する際のレベルは擬似クラスよりも1つ深いため、動的性質は擬似クラスよりもはるかに低いです。実際、疑似要素を設計する目的は、要素内容の最初の文字 (文字) と最初の行を選択し、特定の内容の前後を選択することですが、これは通常のセレクターでは実行できないことです。制御する内容は実際には要素と同じですが、要素に基づいて抽象化されただけであり、文書内には存在しないため、疑似要素と呼ばれます。

::first-letter

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

::first-line

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

#::before

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

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

::前および: :after は通常、CSS コンテンツ生成で使用されます。

プログラミング関連の知識について詳しくは、プログラミング教育をご覧ください。 ！

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