css3 - CSS 疑似クラスの役割は何ですか?

Question

写真にあるように、これは私が面接の質問を検討していたときに遭遇したものです。具体的にはどのような違いがあるのでしょうか？マスターに聞きたいです。
とにかく、私が書いたときは見つかりませんでしたが、効果はまだわかります

Answer 1

CSS3 疑似クラスには単一コロン (:) が使用され、CSS3 疑似要素には二重コロン (::) が使用されます。
W3C 仕様には CSS3 セレクターに関する説明があります:

擬似要素は、2 つのコロン (::) とそれに続く擬似要素の名前で構成されます。

この :: 表記は、疑似クラスと疑似要素の区別を確立するために、現在のドキュメントで導入されています。既存のスタイル シートとの互換性のために、ユーザー エージェントは、 で導入された疑似要素に対する以前の 1 コロンの表記も受け入れる必要があります。 CSS レベル 1 および 2 (つまり、:first-line、:first-letter、:before、:after)。この互換性は、CSS レベル 3 で導入された新しい疑似要素では許可されません。

簡単に訳すと、擬似要素は二重コロンと擬似要素の名前で構成されるというのが一般的な考え方です。二重コロンは、疑似クラスと疑似要素を区別するために現在の仕様で導入されました。ただし、疑似クラスは既存のスタイルと互換性があり、ブラウザは :first-line、:first-letter、:before、:after などの古い疑似クラスを同時にサポートする必要があります。

これで、タイトルの質問に完全に答えることができます。:before など、CSS2 より前に存在した疑似要素については、単一コロンと二重コロン::before は同じ効果を持ちます。

そのため、Webkit、Firefox、Opera、その他のブラウザとの互換性のみが必要な場合は、疑似要素に二重コロンの記述を使用することをお勧めします。IE ブラウザとの互換性が必要な場合は、CSS2 シングルを使用する方が安全です。コロンの書き方。

Answer 2

Baidu はこの種の問題を知っています

参照:

疑似要素 https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements

疑似クラス https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes