疑似クラス 疑似要素 見分け方_html/css_WEB-ITnose

少し前にWebページを書いていた時にCSSの疑似要素:afterを使ってスタイルを実装していたので、疑似クラスと疑似要素を見直しました。通常は実装時に使用されますが、実際に 2 つの概念を区別するとなると、少し混乱します。

まず、W3S の疑似クラスと疑似要素の定義を見てください:

疑似クラス: 特定のセレクターに特殊効果を追加するために使用されます。

疑似要素: 特定のセレクターに特殊効果を設定します。

私のような理解力の乏しい人間にとって、敬意を込めてこの二つの文章は…これは同じ概念ですよね？

これら 2 つの概念から、次のことがわかります: 1. どちらもセレクターから切り離せない; 2. 「特別な」効果…

特別とは何ですか?クラスや要素との関係は何ですか?

疑似クラスの種類:

疑似クラスの分類を通じて、疑似クラスが要素の特定の状態 (例: ホバーなど)、または要素が役割を果たすための特定の特性 (lang など)。疑似クラスは動的なステータスに基づいて追加され、スタイルの動的な変更を実現します。機能はクラスと似ていますが、後者は文書内でクラスの静的マークが付いているのに対し、擬似クラスは文書内に存在しないため、文書の外にある抽象クラスに属するため、擬似クラスと呼ばれます。クラス。 (要素が特定の状態にあるとき、ここに特定のクラスがあるようにします) 3*)

疑似要素の種類:

疑似要素の分類から、疑似クラスは以下を記述できることがわかります。要素の特定の内容 操作を実行します (最初の文字など)。テキストの最初の文字に特別なスタイルを追加するなどの効果は、通常のセレクターでは実現できません (テキストの最初の文字にラベルを追加して要素にしない限り)。擬似要素の制御内容は要素の制御内容と一致しますが、文書内に存在しない抽象要素であるため、擬似要素と呼ばれます。

例（疑似要素）:

疑似要素を使用する:

<p>Angry birds</p>

p:first-letter {color: #00FF00;}

疑似要素を使用せずに上記の効果を実現する:

<p>      <span class="changeColor">A</span>ngry birds!</p>

.changeColor {color:#00FF00;}

前者は渡される 疑似要素が動作する後者の場合、要素に対する直接操作であり、2 つの効果は一貫しています。ただし、疑似要素は実際には文書内に存在しません。