css - この 2 つのセレクターの違いは何ですか?

Question

次のような疑似要素の定義の 2 つの異なるスタイルが表示されます。

#div::after { content: ''; display: block; }
#div:after { content: ''; display: block; }  

それらの違いは何ですか？どのように使用すればよいですか？

Answer 1

これにより、疑似要素と疑似クラスが区別されます。しかし実際には、CSS3 で:二重コロンが導入されたときに CSS2 構文に単一コロンが使用されることを除いて、それらは同じです。::したがって、ブラウザの互換性に関する懸念がある場合は、そのままにしておく必要があります:after

Answer 2

::after is the CSS 3 notation. This is recommended for use according to the Selectors Level 3 Module. The only issue with using the newer syntax is that you will run into IE7/8 compatibility problems

The point is also to distinguish pseudo-elements from pseudo-classes (which only use a single colon)

From Selectors Level 3:

"This :: notation is introduced by the current document in order to establish a discrimination between pseudo-classes and pseudo-elements. For compatibility with existing style sheets, user agents must also accept the previous one-colon notation for pseudo-elements introduced in CSS levels 1 and 2 (namely, :first-line, :first-letter, :before and :after). This compatibility is not allowed for the new pseudo-elements introduced in this specification."

Answer 3

どちらも同じことをします。

::afterより論理的ですが、古い IE ではサポートされていません

一般に、:whateverは疑似クラスです。追加先のセレクターをフィルタリングして、時々一致するようにします (ホバーしたときや無効なときなど)。

::whatever疑似要素です。追加先のセレクターに関連する新しい仮想要素を参照します。ソースに実際には存在しない要素 (スクロールバーなど)。

beforeとafterは論理的に疑似要素ですが、::構文が存在する前に導入されました。

Answer 4

使用::される擬似が追加の動的に作成された要素をターゲットにしていることを示しますが、既存の要素のスタイル変更ではありません。しかし、下位互換性のため、シングル コロンとダブル コロンの両方がブラウザー ベンダーによってサポートされています。つまり、実際には最新のブラウザーで同じ結果が得られます。