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

CSS 疑似要素と疑似クラスは、CSS を学習したばかりの学生にとっては混同されやすい可能性があります。公式ドキュメントでは、CSS 疑似クラスは特定のセレクターに特殊な効果を追加するために使用され、CSS 疑似要素は特別な効果を追加するために使用されます。一部のセレクターにエフェクトを追加しました。では、CSS 疑似要素と疑似クラスの違いは何でしょうか?この記事では詳しく説明します。

まず、2 つの点を明確にします。1 つ目: どちらもセレクターに関連しており、2 つ目: いくつかの「特別な」効果を追加します。ここで特別なのは、この 2 つが他の css では説明できないことを説明していることです。

疑似クラスタイプ

:lang疑似要素の種類

疑似クラス	関数
:active	アクティブ化された要素にスタイルを追加します
: focus	選択した要素にスタイルを追加します
:hover	マウスが要素上にあるときに要素にスタイルを追加します
:link	未訪問のリンクに特別なスタイルを追加します
:visited	を追加します訪問済みリンクに特別なスタイルを追加します
:first-child 要素の最初の子要素に特別なスタイルを追加します
作成者が特定の要素で使用される言語を定義できるようにします

疑似要素: 最初の文字: 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疑似要素の使い方を詳しく解説🎜🎜

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

以上がcss 属性: css 疑似クラスと css 疑似要素の違い (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。