CSSの疑似クラスと疑似オブジェクト（疑似要素）の違いは何ですか

擬似クラスは特定のセレクターに特殊効果を追加するために使用され、擬似要素は特定のセレクターに特殊効果を追加するために使用されます。擬似クラスの効果は実際のクラスを追加することで実現でき、擬似オブジェクトの効果は実際の要素を追加することで実現できます。簡単に言えば、それらの本質的な違いは、抽象的であるかどうかにかかわらず、新しい要素を生み出します。

このチュートリアルの動作環境: Windows 7 システム、CSS3 バージョン、Dell G3 コンピューター。

疑似クラスと疑似要素 (疑似オブジェクト) の基本的な違いは、新しい要素を作成するかどうかです。

疑似要素/疑似オブジェクト: DOM ドキュメント内には存在せず、仮想要素であり、新しい要素を作成します。要素の子要素を表します。この子要素は論理的には存在しますが、ドキュメント ツリーには実際には存在しません。

擬似オブジェクト セレクター

##プロパティCSS バージョン 親から継承説明#E:first -letter/ E::first-letterE:first-line/E::first-lineE:before/E::beforeE:after/E::afterE::selection

疑似クラス: DOM ドキュメント内に論理的に存在しますが、ドキュメント ツリー内で識別する必要のない「ゴースト」カテゴリ。

#疑似クラス セレクター

プロパティ	バージョン	継承	はじめに
CSS3/CSS1	None	CSS2/CSS1 E:first-letter/E::first-letter 擬似オブジェクト セレクター、オブジェクト内の最初の文字のスタイル。
CSS3/CSS1	なし	CS3/CSS1 疑似オブジェクト セレクター E:first-line/E::first-line は、オブジェクト内の最初の行のスタイルを設定します。
CSS3/CSS2	None	CSS3/CSS3 疑似オブジェクト セレクター E :before/E::before は、(オブジェクト ツリーの論理構造に従って) オブジェクトの前に出現するコンテンツを設定します。コンテンツ属性
CSS3/CSS2	None	CSS3 /CSS2とともに使用されます。擬似オブジェクト セレクター E:after/E::after は、(オブジェクト ツリーの論理構造に従って) オブジェクトの後に発生するコンテンツを設定します。 content 属性とともに使用されます
CSS3	None	CSS3 疑似オブジェクト セレクター E: :selection 、オブジェクトが選択されているときの色を設定します。

##プロパティCSS バージョン 親から継承説明#E:link E:visitedE:hover#E:activeCSS2/CSS1NoneCSS2/CSS1 疑似クラス セレクター E:active、要素を設定ユーザーによってアクティブ化されたときのスタイル (マウスのクリックとリリースの間に発生するイベント)。 CSS2/CSS1CSS2CSS3CSS3#E:first-childCSS2NoneCSS2 疑似クラス セレクター E:first-child は親と一致しますelement 最初の子要素 ​​E. NoneNoneNoneNoneNoneNoneNoneNoneNone#E:emptyCSS3NoneCSS3 疑似クラス セレクター E:empty は子要素 (テキストを含む) に一致しませんノード) 要素 E。 E:checkedCSS3NoneCSS3 疑似クラス セレクター E:checked はユーザーの選択された状態と一致しますインターフェイス要素 E。 (ラジオとチェックボックスの入力タイプを持つフォーム要素の場合)E:enabledCSS3NoneCSS3 擬似クラス セレクター E:enabled は、ユーザー インターフェイス上で有効な状態にある要素 E と一致します。 E:disabledCSS3NoneCSS3 疑似クラス セレクター E:disabled は、ユーザーの無効な状態と一致します。インターフェイス要素 E。 E:targetCSS3NoneCSS3 疑似クラス セレクター E:target は、 が指す E 要素と一致します。関連する URL 。 @page:firstCSS2NoneCSS2 疑似クラス セレクター @page:first は最初にページ コンテナーを設定しますページで使用されるスタイル。 @page ルールでのみ使用されます@page:leftCSS2NoneCSS2 疑似クラス セレクター @page: left は、ページ コンテナがガターの左側にあるすべてのページで使用されるスタイルを設定します。 @page ルールでのみ使用されます@page:rightCSS2NoneCSS2 はオブジェクト セレクター @page です。 right は、ページ コンテナがガターの右側にあるすべてのページに使用されるスタイルを設定します。 @page ルールのみ #

W3C の 2 つのアプリケーションの説明を見てみましょう:

疑似クラス: 一部のセレクターに特殊効果を追加するために使用されます
疑似要素: 特殊効果に使用されます特定のセレクターに追加されます
実際、基本的な意味は、クラス、ID などで選択できない要素を補完することです。

例:

<div>
    <p>a</p>
    <p>b c</p>
</div>

If we want to how最初の p タグのフォントの色を赤にするには? 疑似クラスの使用は非常に簡単です:

p:first-child {
    color: red;
}

しかし、疑似クラスを使用しない場合はどうすればよいでしょうか?この時点で、同じ効果を実現するには、最初の p タグにクラス class

<div>
    <p class="first-child">a</p>
    <p>b c</p>
</div>

p:first-child {
    color: red;
}

を追加する必要がありますが、もう 1 つクラス

を記述する必要があります。擬似的に上記の操作を実現する方法要素が使用されていますか？

p::first-letter {
    color: red;
}

疑似要素を使用しない場合はどうすればよいですか?

<div>
    <p><span>a</span></p>
    <p>b c</p>
</div>

p span {
    color: red;
}

この 2 つの違いがわかります。

疑似クラスの効果は、実際のクラスを追加することで達成できます。

疑似要素は、実際の要素を追加することで実現できます。

したがって、両者の本質的な違いは、抽象化によって新しい要素が作成されるかどうかです。

注:

疑似クラス「:」のみ使用可能

疑似要素は「:」または「::」のどちらかを使用できます

疑似クラスはクラスの追加に似ているため、複数にすることができますが、疑似要素はセレクター内に 1 回だけ出現し、最後にのみ出現できます

関連問題

:after/::after と :before/::before

類似点:

は、疑似クラス オブジェクトを表すために使用でき、設定に使用できます。オブジェクト前の内容

:before と ::before 書き込みメソッドは同等です; :after と ::after 書き込みメソッドは同等です

違い:

:before/: after は Css2 の書き方、::before/::after は Css3 の書き方です

:before/:after は ::before/::after、

よりも互換性が高くなりますただし、H5 開発では::before/::after を使用することをお勧めします

#注:#疑似オブジェクトは content 属性と一緒に使用する必要があります

疑似オブジェクトは DOM では表示されません。js を介して操作することはできません。これは、

#疑似オブジェクトの特殊効果を CSS レンダリング レイヤーに追加するだけです。通常、:hover 疑似を使用する必要があります。 -class style to activate

例: マウスが上に移動したとき Span がオンの場合、Span の前に「duang」を挿入します

<style>
span{
  background: yellow;
}
span:hover::before{
  content:"duang";
}
</style>
 
<span>222</span>

(学習ビデオ共有:

css ビデオ チュートリアル

)

プロパティ	バージョン	継承	はじめに
CSS1	None	CSS1 疑似クラス セレクター E:link は、アクセスされる前にハイパーリンクのスタイルを設定します。
CSS1	None	CSS1 疑似クラス セレクター E:visited、ハイパーリンク a を設定しますリンク アドレスは古いスタイルでアクセスされました。
CSS2	None	CSS2/CSS1 疑似クラス セレクター E:hover、要素を設定しますマウスオーバーでスタイルを設定します。
			#E:focus
None	CSS2/CSS1 疑似クラス セレクター E:focus、要素を設定入力フォーカスが発生したときのスタイル (要素の onfocus イベントが発生したとき)。		E:lang()
None	CSS2 疑似クラス セレクター E:lang() は、特別な使用法を使用して一致します。言語の E 要素。		E:not()
None	CSS3 疑似クラス セレクター E:not() は一致しませんcontains s セレクターの要素 E。		E:root
None	CSS3 疑似クラス セレクター E:root は、ドキュメントのルート要素。
		#E:last-child	CSS3
CSS3 疑似クラス セレクター E:last-child は親と一致しますelement 最後の子要素 ​​E.		E:only-child	CSS3
CSS3 たとえば、セレクター E:only-child は、親要素 唯一の子要素 ​​E.		E:nth-child(n)	CSS3
CSS3 疑似クラス セレクター E:nth-child (n) 親要素の n 番目の子要素 ​​E と一致します。		E:nth-last-child(n)	CSS3
CSS3 疑似クラス セレクター E:nth -last-child(n) は、親要素の下から n 番目の子要素 ​​E と一致します。		E:first-of-type	CSS2
CSS3 疑似クラス セレクター E:first-of- type は、同じ型の最初の兄弟要素 E と一致します。		E:last-of-type	CSS3
CSS3 疑似クラス セレクター E:last-of- type は、同じ型の最後の兄弟要素 E と一致します。		E:only-of-type	CSS3
CSS3 疑似クラス セレクター E:only-of- type は、同じ型の唯一の兄弟要素 E と一致します。		E:nth-of-type(n)	CSS3
CSS3 疑似クラス セレクター E:nth -of-type(n) は、同じ型の n 番目の兄弟要素 E と一致します。		E:nth-last-of-type(n)	CSS3
CSS3 疑似クラス セレクター E :nth-last-of-type(n) は、同じ型の最後から 2 番目の n 番目の兄弟要素 E と一致します。

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