css_html/css_WEB-ITnose の疑似クラスと疑似要素の違い

まず、w3c によって与えられる定義を見てみましょう。

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

擬似要素: 特殊な効果を追加するために使用されます。特定のセレクターにエフェクトを追加します。

。 。 。 。 。何も言ってないのと同じだ！

疑似クラスと疑似要素を区別するには:

疑似要素と疑似クラスが混同しやすい理由は、それらの効果と記述方法が似ているためです。 , しかし、実際には、これらを区別するために、css3 ではどちらも、疑似クラスは 1 つのコロンで表現され、疑似要素は 2 つのコロンで表現されることが明確に規定されています。

次の例は、この 2 つの違いを区別するために使用されます (比較には疑似クラス: first-child と疑似要素: first-letter を使用します)。 🎜>

疑似クラス -- 例:

//cssp>i:first-child {color: red}

//html<p><i>first</i><i>second</i></p>

説明: 疑似クラス: first-child は最初の子要素にスタイルを追加します

pseudo class を使用せず、上記の効果を達成したい場合は、次のようにすることができます:

//css.first-child {color: red}//html<p><i class=first-child>first</i><i>second</i></p>//即我们给第一个子元素添加一个类，然后定义这个类的样式

疑似要素 -- 例:

//cssp:first-letter {color: red}//html<p>i am stephen lee.</p>

//疑似要素: 最初-letter 最初の文字にスタイルを追加します

したがって、疑似要素を使用しない場合、上記の効果を達成するには

//css.first-letter {color: red}html<p><span class='first-letter'>i</span> am stephen lee.</p>

つまり、最初の文字にスパンを追加します。次に、スパンにスタイルを追加します。

要約すると、この 2 つの違いは次のとおりです。

擬似クラスの効果は実際のクラスを追加することで実現できますが、擬似要素の効果は実際のクラスを追加する必要があります。実際の要素を追加することで実現できるため、一方を疑似クラス、もう一方を疑似要素と呼びます。

参考: http://www.ynpxrz.com/n856180c2022.aspx