css 属性: css 疑似クラスと css 疑似要素の違い (コード付き)

疑似要素: 最初の文字: first=line : before: after

違い

ここでは、比較のために疑似クラス :first-child と疑似要素 :first-letter を使用します。 :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

:Pseudo-classes
::Pseudo-elements

//Pseudo-class :first-child 最初の子要素にスタイルを追加します

疑似クラスを使用せず、上記の効果を実現したい場合は、次のようにすることができます:

rrreee

つまり、最初の子要素にクラスを追加して、このクラスのスタイルを定義します。次に、要素の最初の文字にスタイルを追加する方法を見てみましょう:

rrreee

// 擬似要素 :first-letter 次に、次のようにします。擬似要素を使用しないでください。上記の効果を達成するにはどうすればよいでしょうか? rrreeeつまり、最初の文字に span を追加し、次に span にスタイルを追加します。
両者の違いが出てきました。つまり:

疑似クラスの効果は実際のクラスを追加することで実現できますが、疑似要素の効果は実際の要素を追加することで実現する必要があるため、一方が疑似クラスと呼ばれ、その他は擬似要素と呼ばれます。
最後に

擬似要素と擬似クラスが混同されやすいのは、効果が似ていて書き方が似ているからですが、実はcss3では擬似要素が明確に規定されています。 2 つを区別するために、クラスは 1 つのコロンで表され、疑似要素は 2 つのコロンで表されます。

rrreee🎜しかし、互換性の問題により、それらのほとんどは依然として単一のコロンで統一されています。しかし、互換性の問題に関係なく、書くときは良い習慣を身につけ、この 2 つを区別するように最善を尽くす必要があります。 🎜🎜 おすすめ関連記事: 🎜🎜🎜css-pseudo-classes と pseudo-elements_html/css_WEB-ITnose🎜🎜🎜🎜🎜CSS 属性: 使用前 && :使用後、疑似クラスと疑似要素_html/css_WEB-ITnose の違い🎜🎜🎜🎜🎜 CSS 疑似要素とは何ですか? CSS疑似要素の使い方を詳しく解説🎜🎜

関数
の最初の文字に追加しますテキスト
テキストの最初の行に特別なスタイルを追加します
要素の前に何かを挿入します
要素の後に何かを挿入します