CSS クラス、疑似クラス、疑似要素の違いの詳細説明_html/css_WEB-ITnose

CSS のクラスは、要素にスタイルを追加するための要素のフィルタリング (つまり、選択) を容易にするために使用されます。クラスは HTML ドキュメント ツリーで定義されます。

しかし、場合によってはこれでは十分ではありません。たとえば、ユーザーの操作 (ホバー、アクティブ化など) によって要素の状態が変化し、クラスはこれらの動的な変化に対して無力です。

この目的のために、CSS は疑似クラスの概念を導入し、ドキュメント ツリーの外部の情報に基づいて要素をフィルター処理する機能をサポートします。

擬似クラスは抽象クラスであり、本質的にはクラスであるため、その主な機能は引き続き要素を選択し、特定のスタイルを設定することです。

疑似クラス定義では、次のものが使用されます: 単一のコロンと名前 (mydiv:hover など)。

擬似クラスの選択オブジェクトは、ユーザーがドキュメントを操作するにつれて変化する可能性があります。たとえば、ユーザーが特定のノードを削除すると、サブ要素 (n 番目の子) 擬似クラスの選択に影響します。

疑似クラスは、名前、属性、内容ではなく、特性 (ステータスや順序など) に基づいて要素を選択します。 (:lang を除く)

疑似要素は、疑似クラスと同じ設計意図であり、ドキュメント ツリー以外の情報に基づいた書式設定をサポートします。

疑似要素は本質的には要素ですが、通常はこの要素の「部分」または「補足」として既存の要素に接続する必要があります。たとえば、::first-line または ::after。

CSS2.1 仕様で導入された新しい疑似要素構文は ダブル コロン:: ですが、過去のバージョンとの互換性を保つため、以前に導入された一部の疑似要素では引き続き単一コロン構文を使用できます。

要素 をフィルタリングするために使用される疑似クラスとは異なり、疑似要素は コンテンツ をフィルタリングしたり、補足コンテンツを作成したり、コンテンツの周囲に仮想コンテナをラップしたり、特定のスタイルを適用したりするために使用されます。

疑似要素に疑似クラスを適用できます。

2 つの使用方法を直観的に理解できるオンライン例を次に示します: http://wow.techbrood.com/fiddle/15719

疑似クラスと疑似要素について詳しくは、こちらをご覧ください。用途、例、違い。

オンライン チュートリアルを参照してください: http://techbrood.com/Guide/h5b2a?p=css-pseudo-elements

by iefreer