CSS 疑似クラスと疑似要素の違い

擬似クラスと擬似要素は文書構造から独立しています。要素を取得する方法は、ID、class、attributes などの基本的な要素の特性に基づいているのではなく、特別な state (擬似クラス) 内の要素、または要素内の特別なコンテンツ (擬似要素) に基づいています。 ）。違いは以下にまとめられています:

CSS伪类 (Pseudo-classes)：用于向某些选择器添加特殊的效果，即在元素当前静态样式的基础上添加特殊效果（一般都是动态效果），所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。

属性	説明
: アクティブ	アクティブ化された要素にスタイルを追加
: フォーカス	要素にスタイルを追加します。キーボード入力フォーカス要素が追加されました スタイル
:hover	マウスが要素上にあるときに要素にスタイルを追加します
:link	未訪問のリンクにスタイルを追加します
:visited	訪問済みリンクにスタイルを追加する
:first-child	要素の最初の子要素にスタイルを追加する
:lang	指定された lang 属性を持つ要素に追加する Style

备注：在 CSS 定义中，同一个元素的 :hover 必须位于 :link、:visited 之后才能生效，:active 必须位于 :hover 之后才能生效。

css 疑似要素 (疑似要素): 要素内の特定の内容を設定および操作する、特定のセレクターに特殊効果を設定するために使用されます。 操作レベルは疑似クラスよりも深いため、ダイナミクスは疑似クラスよりも悪いです。

プロパティ	説明
:first-letter	テキストの最初の文字に特別なスタイルを追加します
:first-line	特別なスタイルを追加しますにテキストの最初の行 スタイル
:before	要素の前にコンテンツを追加します
:after	要素の後にコンテンツを追加します

<a href="http%20://www.php.cn/wiki/1550.html" target="_blank">w3c<code><a href="http://www.php.cn/wiki/1550.html" target="_blank">w3c</a> 对两者的定义：

• CSS 伪类用于向某些选择器添加特殊的效果。

• CSS 伪元素用于将特殊的效果添加到某些选择器。

区别

这里用伪类 :first-child 和伪元素 :first-letter 来进行比较。

p>i:first-child {color: red}<p>
    <i>first</i>
    <i>second</i></p>

 //伪类 :first-child 添加样式到第一个子元素
如果我们不使用伪类，而希望达到上述效果，可以这样做：

.first-child {color: red}<p>
    <i class="first-child">first</i>
    <i>second</i></p>

即我们给第一个子元素添加一个类，然后定义这个类的样式。那么我们接着看看伪元素：

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

//伪元素 ::first-letter 添加样式到第一个字母
那么如果我们不使用伪元素，要达到上述效果，应该怎么做呢？

.first-letter {color: red}<p><span class=&#39;first-letter&#39;>I</span> am stephen lee.</p>

即我们给第一个字母添加一个 span，然后给 span 增加样式。
两者的区别已经出来了。那就是：

伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到，这也是为什么他们一个称为伪类，一个称为伪元素的原因。

总结

伪元素和伪类之所以这么容易混淆，是因为他们的效果类似而且写法相仿，但实际上 css3 2 つの定義:

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

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

違い

🎜ここでは疑似クラス :first-child と疑似要素 が使用されています: 比較する最初の文字。 🎜

:Pseudo-classes
::Pseudo-elements

🎜 //疑似クラス :first-child 最初の子要素にスタイルを追加します
疑似クラスを使用せず、上記の効果を実現したい場合は、次のようにすることができます。 🎜rrreee🎜 つまり、最初の子要素にクラスを追加し、このクラスのスタイルを定義します。次に、疑似要素を見てみましょう: 🎜rrreee🎜//疑似要素 ::first-letter 最初の文字にスタイルを追加します
したがって、疑似要素を使用しない場合は、上記の効果を達成するには、どうすればよいですか? 🎜rrreee🎜つまり、最初の文字に span を追加し、span にスタイルを追加します。
両者の違いが出てきました。つまり: 🎜

🎜🎜擬似クラスの効果は実際のクラスを追加することで実現できますが、擬似要素の効果は実際の要素を追加することで実現する必要があります。 . これが、一方が擬似クラスと呼ばれ、もう一方が擬似要素と呼ばれる理由です。 🎜🎜

まとめ

🎜 擬似要素と擬似クラスが混同しやすい理由は、その効果と記述方法が似ているためです。は似ていますが、実際には css3 この 2 つを区別するために、疑似クラスは 1 つのコロンで表現され、疑似要素は 2 つのコロンで表現されることが明確に規定されています。 🎜rrreee🎜しかし、互換性の問題により、それらのほとんどは依然として単一のコロンで統一されています。しかし、互換性の問題に関係なく、書くときは良い習慣を身につけ、この 2 つを区別するように最善を尽くす必要があります。 🎜

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