CSS3の擬似クラスと擬似要素の違いと注意点について

CSS の擬似クラスと擬似要素の概念は混同されやすいです

今日は擬似クラスと擬似要素の違いについて話しましょう

---

定義

まず、擬似を見てみましょうクラスと擬似要素
w3cの定義はこのように説明されています

• 擬似クラス: 特定のセレクターに特殊効果を追加するために使用されます

• 擬似要素: 特定のセレクターに特殊効果を追加するために使用されます

正直に言うと、私の中国語は下手かもしれませんが、これら 2 つの文は同等だと思います:-)
違いがまったくわかりません
それらはすべて特定のセレクターに「特殊効果を追加」しているだけです

標準このような文の翻訳は次のようになります

CSSは、ドキュメントツリー

に基づいた情報のフォーマットを実現するために、

疑似クラスと疑似要素

の概念を導入します。これはより抽象的ですが、実際にはこれは、class、id などの要素を選択して

違い

を補うことはできないことを意味します。この違いを理解するには例が必要です

<p>
    <em>This</em>
    <em>is a text</em></p>

最初の em タグのフォントの色が必要な場合はどうなるでしょうか赤に変わります
私たちがよく知っている疑似クラスは非常に単純です

em:first-child {    color: red;}

しかし、疑似クラスがない場合はどうすればよいでしょうか?これが、最初の em タグにクラスを追加する必要がある理由です

<p>
    <em class="first-child">This</em>
    <em>is a text</em></p>

em.first-child {    color: red;}

同じ効果が得られます

<p>
    <em>This</em>
    <em>is a text</em></p>

---

または、この例

次に、この段落の最初の文字を赤にしたいです
その方法
今回は疑似要素を使用する必要があります

p::first-letter {    color: red;}

擬似要素は存在しないということです

現時点では、span タグをネストすることでのみ実現できます

<p>
    <em><span>T</span>his</em>
    <em>is a text</em></p>

p span {    color: red;}

---

これを見て、一方が擬似クラスと呼ばれ、もう一方が擬似要素と呼ばれる理由を誰もが理解できたと思います。疑似クラスは、実際のクラスを追加することで実現できます。 疑似要素の効果は、実際のクラスを追加することで実現できます。

それらの本質的な違いは、
抽象化によって新しい要素が作成されるかどうかです

歴史

要素のダイナミクスを表すために使用されます (典型的なアンカー疑似クラスのリンク、訪問済み、ホバー、アクティブ)

CSS2 標準で拡張されたため、論理的には存在しますが、DOM ツリー内で識別する必要はありません

疑似要素ロジックは存在しますが、DOM ツリーには存在しません

それらの概念は混乱しやすいですが
、通常の使用には影響しません

で述べました。 CSS3セレクターの紹介と使い方まとめ
疑似クラスは「:」のみ使用可能

疑似要素は「:」または「::」のどちらかを使用可能

ここでその理由を説明します


CSS3の標準では、疑似クラスは単一のコロン「:」

そして擬似要素は二重コロン「::」を使用します (混乱を避けるため)

---

その前に、それが擬似であるかどうかについて クラスと擬似要素の両方が単一のコロン「:」を使用します

つまり、疑似要素との互換性を確保するため、疑似要素を使用する両方の方法が可能です
ただし、IE の低バージョンにはダブルコロンの互換性の問題があります
そのため、過去にスタイルを作成した人々は、疑似クラスと疑似要素について異なる意見を持っていました。単に単一のコロンを使用するだけです
、この混乱は永遠に続きます

注意

疑似クラスと疑似要素を使用するときは

特別な注意を払うべきことが 1 つあります

疑似クラスは実際のクラスと同じであり、次の中で使用できます。スタック

相互に排他的でない限り、数に上限はありません
例えばこんな感じ

em:first-child:hover {    color: red;}

これで全然大丈夫です
ただし、ここで「と」の関係に注意してください

つまり、最初の子要素「first-child」

と「hover」カーソルホバーの両方を満たす必要があります


疑似要素ははるかに厳密です

---

疑似要素はセレクター内に 1 回だけ出現でき、最後にのみ出現できます

(ここで一部の学生が誤解していたので、修正しました) 以下のようなスタイルは有効になりません

p::first-letter:hover {  /*错误的写法：伪元素不是末尾*/
    color: red;}

p::first-letter::selection {  /*错误的写法：伪元素出现了多个*/
    color: red;}

の優先順位についてもう 1 つ言わせてください

---

重みを計算するとき 疑似クラスの優先順位は同じですクラスとして 疑似要素はタグと同じ優先順位を持ちます

概要

疑似クラスと疑似要素はどちらもセレクターに特殊効果を追加するために使用されます

• 疑似クラスと疑似要素の本質的な違いは、新しい要素を作成するためのabstract

• 相互に排他的でない限り、疑似クラスを重ね合わせることができます

• 疑似要素はセレクター内に1回のみ出現でき、最後にのみ出現できます

• 優先順位擬似クラスと擬似要素の優先度は、それぞれクラスとラベルの優先度と同じです

以上がCSS3の擬似クラスと擬似要素の違いと注意点についての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。