再投稿：CSS疑似クラスとCSS疑似要素の違いと由来を具体的に解説_html/css_WEB-ITnose

2 つの違いは、実は非常に古い質問です。しかし今日、インターネット上のさまざまな誤った情報や書籍の無責任な間違いのせいで、多くの CSS ベテランを含め、疑似クラスと疑似要素を混同する人が依然としてかなりの数います。私自身、この業界に参入した初期の頃は、ひどく誤解されていました。フォーラムの投稿のほとんどは、この概念のニュアンスを気にしていませんでした。たとえ誰かが「この 2 つは違う」と言ったとしても、あまりにも多くの投稿に埋もれてしまうだけです。したがって、私がここで焦点を当てているのは、この 2 つが異なる理由と、見落としがちな詳細についてです。

疑似クラスであろうと疑似要素であろうと、それらはすべて CSS セレクターのカテゴリに属します。したがって、それらの定義は CSS 標準のセレクターの章にあります。それらは CSS2.1 セレクターと CSS セレクター レベル 3 であり、どちらもすでに推奨規格となっています。
標準定義

CSS2.1、5.10 の擬似要素と擬似クラスでは、これら 2 つの概念の起源が説明されており、これらは一緒に言及されています。ただし、セレクター レベル 3 では、区別するために 2 つのセクションに分かれています。しかし、いずれにせよ、疑似クラスや疑似要素が導入されるのは、ドキュメント ツリー内の一部の情報を完全に記述できないためです。たとえば、CSS には「段落の最初の行」などのセレクターがありません。一部の公開シナリオでは必要になります。標準の言葉で言えば:
CSS は、ドキュメント ツリーの外側にある情報に基づいた書式設定を可能にするために、疑似要素と疑似クラスの概念を導入します。
簡単に翻訳すると、次のようになります。
CSS は、疑似要素と疑似クラスの概念を導入します。 -ドキュメントツリーの外にある情報に基づいて書式設定を許可するクラス
非常に抽象的ですが、実際には既存の CSS では記述できないものを記述することになります。足りないものがあれば、何かを導入し、規格であれ、人材であれ、すべてはそうやって成長していきます。

疑似クラスと疑似要素の違い
ここで表を作成して、すべての疑似クラスと疑似要素を個別にリストすることもできますが、これでは「どれがどれで、どれがどれである」を覚えるのではなく、形式的すぎます。ではないので、区別するために実際に配置することをお勧めします。疑似クラスと疑似要素の間には根本的な違いがあり、それは標準の記述ステートメントに直接反映されます。
疑似要素の最初の行の例を見てみましょう。これで HTML の一部が作成され、コンテンツは段落になります:

コードをコピーします

コードは次のとおりです:

私は私の剣の骨であり、鋼は私の体です。火は私の血です
私は何千もの刃を作りました
多くの武器を生み出すために痛みに耐えました。 .

この段落の最初の行を擬似要素を使わずに記述するにはどうすればよいでしょうか?スパンのレイヤーをネストして、クラス名を追加する必要があると思います:

コードをコピーします

コードは次のとおりです:

死にも知られていません、そして、多くの痛みに耐えました。
それでも、その手は何も持たないので、私が祈ると、次のようになります:

;

ul の最初の要素を記述したい場合、新しい要素をネストする代わりに、最初の既存の li にクラス名を追加するだけです:

コードをコピーします。

コードは次のとおりです。

最初の行と最初の要素のセマンティクスは似ていますが、最終的な効果は完全に異なります。したがって、疑似クラスと疑似要素の基本的な違いは、新しい要素 (抽象化) を作成するかどうかです。意味を模倣するという観点から、それを識別するために新しい要素を追加する必要がある場合、それは擬似要素です。逆に、既存の要素にカテゴリを追加するだけでよい場合、それは擬似クラスです。そして、それが、標準が疑似要素を説明するために正確に「作成」という言葉を使用し、疑似クラスを説明するために「分類」という言葉を使用する理由です。 1 つは新しく作成された「ゴースト」要素を記述し、もう 1 つは「ゴースト」カテゴリに適合する既存の要素を記述します。

疑似クラスは当初、いくつかの要素の動的ステータス、通常はリンクのさまざまなステータス (LVHA) を表すために使用されました。その後、CSS2 標準はその概念的範囲を拡張し、論理的には存在するがドキュメント ツリー内で識別する必要のないすべての「ゴースト」カテゴリを含めるようになりました。
疑似要素は要素のサブ要素を表します。このサブ要素は論理的には存在しますが、ドキュメント ツリーには実際には存在しません。

疑似クラスと疑似要素の混乱の原因
最も混乱を招くのは、ほとんどの人が、:before や :after のような疑似要素を何気なく疑似クラスと呼んでいることであり、概念的な混乱の場合でもそうであるかもしれません。 、実際の使用では問題ありません?? 概念が混同されていても、実際の使用ではそれほど問題は発生しないため:)
CSS セレクター レベル 3 両者の混同を区別するために、特別にコロンが使用されます。区別:
疑似クラスはコロンで表されます: 最初の子の
疑似要素は2つのコロンで表されます::最初の行

であり、ブラウザは既存の疑似要素の単一のコロン表現と互換性がある必要があると規定されていますCSS1 および 2 では、CSS3 で新たに導入された疑似要素と互換性がありません。要素の単一コロン表現。その後の結果は誰もが知っています。IE の以前のバージョンでは二重コロンとの互換性の問題があるため、ほとんどすべての CSSer はスタイルを記述するときに常に単一コロンを使用していました。これにより、目に見えない混乱が永続化します。 CSS3 の新しい擬似要素の使用は、これまでのところ実用とは程遠いものです。

疑似クラスと疑似要素を使用する際の注意点
それらの違いを理解した上で、実際に使用する際にはいくつかの注意と考慮が必要です。例: 疑似クラスと疑似要素のセレクターの特異性 (優先度) を計算するにはどうすればよいですか?
距離に依存しない CSS セレクターに関する前回の記事で、CSS 標準計算セレクターの特別な部分を翻訳しました。その部分を読むと、答えは明らかです。疑似クラスの特別な規定を無効にすることに加えて、それらを実際のものとして分離します。クラスと要素の計算。
標準の将来のバージョンでは、セレクターに複数の擬似要素を含めることができるようになる可能性がありますが、現時点では、擬似要素はセレクター内で 1 回のみ、最後にのみ出現できます。実際、疑似要素は論理的ではありますが、選択された要素の存在しない部分であるため、アプリケーション内の誰もそれを誤って複数として書き込むことはありません。疑似クラスは、実際のクラスと同様にクラスの役割を果たします。疑似クラスは、相互に排他的でない限り、同時に同じ要素で使用できます。 CSS3 セレクターの詳細な説明については、rogerjohansson の CSS 3 セレクターの説明をお勧めします。

結論
元々はちょっとだけ書こうと思ったんですが、あまり言いたくなかったので… 結局、色々言い損ねた気がして頭の中で探し続けていたのですが、でも次回しか追加できないかもしれません。この記事を書く目的は、次の記事「CSS 疑似クラスと CSS 疑似要素の典型的な応用」への道を整えることです。理論的になりたくないことを書くとすぐに話し始めます。ナンセンスです、恥ずかしいです…この記事を見返すと、言葉が多くてちょっとごちゃごちゃしてしまいますが、一言でまとめるとこんな感じです。可能な限り明らかに、冗長すぎることは避けられません。理論はいつも少し退屈に思えますが、次のチャット アプリケーションはそれほど退屈ではないはずです:)