CSS の疑似クラスと疑似要素、およびそれらの違い

この記事ではCSSの疑似クラスと疑似要素の詳しい説明と両者の違いを中心に紹介します。 実はCSS3では疑似クラスの前にコロンを使うという単純かつ大雑把な方法が標準化されています。 、および疑似要素 混乱しにくいように、前に 2 つのコロンで表されます。必要な場合は、

CSS 疑似クラス
CSS 疑似クラス (疑似クラス) の概念と機能を参照してください。セレクターのボルトであり、関連付けられたセレクターの状態を指定するために使用されます。形式は selector:pseudoclass{property:value;} で、半角英語のコロン (:) を使用してセレクターと疑似クラスを区切ります。 CSS の提案の多くはブラウザーではサポートされていませんが、安全に使用できる接続用の CSS 疑似クラスが 4 つあります。
1.linkはアクセス接続に使用されます。
2.visited は、すでに訪問された接続で使用されます。
3.hoverはマウスカーソルが置かれている接続に使用されます。
4.active は、フォーカスを受け取った (たとえば、クリックされた) 接続に使用されます。
例:

ExampleSourceCode   
a:link{     
color:red
}     
a:visited{     
color:green
}     
a:hover{     
color:blue
}     
a:active{     
color:orange     
}

注:

CSS を使用するとバイパスを制御できますが、多くのユーザーが依然としてそれを期待しているため、訪問済みの接続を示すために異なる色を使用することをお勧めします。 CSS 疑似クラス (hover を除く) は一般的には使用されておらず、おそらく以前ほど一般的には使用されていません。したがって、以前ほど便利ではありません。しかし、ユーザーの意見を収集できれば、それを使用する必要があることがわかります。
伝統的に、接続テキストは青、訪問された接続は紫です。おそらく、これが最も効果的で便利な色です。しかし、CSS の広範な発展により、この色はもはや一般的ではなくなり、ユーザーは接続が青または紫でなければならないとは考えなくなりました。
接続以外の他の要素でも hover 疑似クラスを使用できるはずです。残念ながら、InternetExplore はこれをサポートしていません。これは本当に大きな迷惑です。

疑似要素
実際、CSS の疑似要素は HTML には存在しません。通常、それらは特定の要素の特別な処理にのみ使用されます。 :
:first-line
p要素の最初の行のスタイルを指定できます:
:first-letter
p要素の最初の単語のスタイルを指定できます::selection
ユーザーハイライトの効果を定義します
:
:before
要素の前にコンテンツを挿入する:
:after
要素の後にコンテンツを挿入するHTMLの例

<p>
    臣亮言，先帝創業未半<br>

    每天，天剛亮時，我母親便把我喊醒，叫我披衣坐起。我從不知道她醒來坐了多久了。   
</p>

first-lineとfirst-letter

/* 第一行樣式 */
p::first-line {   
    color: red;   
}   
/* 開頭第一個字樣式 */
p::first-letter {   
    font-size: 30px;   
}   
selection   
// 反白後的效果   
p::selection {   
    background: red;   
    color: #FFF;   
}   
// Firefox   
p::-moz-selection {   
    background: red;   
    color: #FFF;   
}

疑似クラスと疑似要素の違い: まず、
w3c の 2 つの定義を読んでください: 1. CSS 疑似クラスは、特定のセレクターに特殊効果を追加するために使用されます。 2.CSS 擬似要素は、特定のセレクターに特殊効果を追加するために使用されます。
2 つの点を明確にできます。1 つ目は、両方ともセレクターに関連しているということ、2 つ目は、いくつかの「特別な」効果を追加するということです。ここでの特別な点は、この 2 つの CSS が他の CSS では記述できないものを記述していることです。
擬似クラス型

擬似要素型

違い

ここでは、比較のために擬似クラス

:first-child
と擬似要素:first-letterを使用します。

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

//Pseudo-class: 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>

//pseudo-element :first-letter

それで、疑似要素を使用しない場合、これを達成するにはどうすればよいですか?上記の効果は？

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

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

両者の違いが出てきました。つまり:

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

总结
伪元素和伪类之所以这么容易混淆，是因为他们的效果类似而且写法相仿，但实际上 css3 为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。

:Pseudo-classes   
::Pseudo-elements

但因为兼容性的问题，所以现在大部分还是统一的单冒号，但是抛开兼容性的问题，我们在书写时应该尽可能养成好习惯，区分两者。

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