CSSの共通属性擬似要素と擬似要素のまとめ

前回は、ID セレクターとクラス セレクターについてそれぞれ説明し、その違いと関連性についても一緒に見ていきましょう。

実は、以前は疑似クラスと疑似要素について混乱していましたが、今回はその謎のコートを剥がすことにしました。疑似要素とは何ですか?

疑似クラスと疑似要素の理解:

公式説明:

疑似クラスは当初、一部の要素の動的ステータス、通常は一般的に使用されるリンクのさまざまなステータス (リンク、アクティブ、ホバー、訪問済み) を表すために使用されました。 ) に続いて、CSS2 標準
は、論理的に存在するがドキュメント ツリー内で識別されないすべての「ゴースト」カテゴリを含むようにその概念範囲を拡張しました。

擬似要素は、特定の要素のサブ要素を表します。このサブ要素は論理的には存在しますが、通常使用する after や before などのドキュメント ツリーには実際には存在しません。

私の大まかな理解では、擬似クラスは識別する必要のないクラス、擬似要素は要素であるがドキュメントツリーには存在しない、ということです。

使用法について: 疑似クラスの前にはコロンが付き、疑似要素の前には 2 つのコロンが付きます。 E:first-child 疑似クラス、E::first-line 疑似要素。これは CSS3 の最新標準ですが、CSS2 では前後にコロンが使用されるため、ここは注意が必要です。さらに、CSS3 では多くの疑似クラスも拡張されていますが、ここでは触れませんので、興味がある方はご自身で情報を確認してください。

一般的なアプリケーション:

疑似クラス:
1.a リンク スタイル リンクをクリック a:hover{color:red} マウスをホバーするとフォントが赤になります。

2. インターレースカラー変更

• 1
23
• 4

; ul li:nth-child(even){background-color:#ccc} または ul li:nth-chilid(2):{background-clolor:#ccc}

疑似要素:

clear float:
.clear {zoom:1}
.clear:after{display:block;content:'';clear:both;}

擬似クラスと擬似要素については以上です。擬似に関してできることはたくさんあります。 -クラスと擬似要素の効果。

一般的な CSS 属性、疑似要素、および疑似要素の概要に関するその他の関連記事については、PHP 中国語 Web サイトに注目してください。