CSS の疑似クラス [:] と疑似要素 [::] は、日常の開発プロセスで使用する疑似要素セレクターです。[:] を使用する場合もあれば、[:: ] を使用する場合もあります。両方ともOKです。なぜでしょうか? 今日は、これら 2 つの違いについて見ていきます。
それらの違いを理解するには、まず疑似要素と疑似クラスという 2 つの概念を理解する必要があります。
では、擬似要素と擬似クラスとは何でしょうか?
公式の定義は次のとおりです (W3C より)。
1. CSS 疑似クラスは、特定のセレクターに特殊効果を追加するために使用されます。
2. CSS 疑似要素は、特定のセレクターに特殊効果を追加するために使用されます。
一見すると、この概念は複雑すぎるように思えます。ただし、心配しないでください。両方の概念に現れる 2 つの重要なキーワード、セレクターとスペシャルを注意深く調べました。
言うまでもなく、セレクター、これら 2 つは特定の要素を選択するために使用されます。
特別とは、これらの両方が他の CSS では実行できないことを実行できることを意味します。
そして、それらすべてに共通することの 1 つは、それらがすべて前のレイヤーのセレクターに基づいて選択されるということです。つまり、それらを使用するには、前のレイヤーで選択された要素が動作する必要があります。
このように見ると、実際にそれらの役割が何であるかを大まかに理解できます。
疑似クラス
擬似クラスは実際にはセレクターです。元のクラスと同様に、すべての要素に適用できます。対応する擬似クラスが要素に追加されている限り、従来のクラスとの違いは、標準で事前定義されている点です。 . はドキュメント フローには反映されず、そのうちのいくつかのみが存在します。
一般的な疑似クラス:
(ステータス クラス):link/:hover/:active/:focus/:visited
(構造クラス):first-child/:last-child/:nth-child/:nth-last-child/: Only-child/:first-of-type/:last-of-type/:nth-of-type/:nth-last-of-type/:only-of-type/:not/:target/:empty
(フォームクラス):disabled/:enabled/:required/:optional/:read-only/:read-write/:default/:valid/:invalid/:focus (テキストクラス):placeholder-shown (選択クラス) :
チェック
済み/:不定
(数値クラス):範囲内/:範囲外
例：
たとえば、マウス カーソルが div 上をスライドしたときに div に特別なスタイルを表示させたい場合は、:hover 疑似クラス セレクターを使用する必要があります。
//html
<div>我是文字，鼠标滑过我，字体颜色变成红色</div>
//css样式
div:hover {
color: red
}擬似要素
その名前のように、擬似要素は本質的に要素と同等です。しかし、この要素は通常のドキュメント ツリーには存在しないという点で特別です。それは要素に基づいて抽象化されたものにすぎません。それは無形の魂のようなものです。必要な場合にのみ使用され、要素内容の最初の文字や最初の行などのどこかに出現し、対象となる特殊な状態は擬似クラスとは異なります。その動作レベルは擬似クラスよりも 1 層深いです。クラスであるため、その動的な性質は擬似クラスの性質よりも高くなります。
一般的な疑似要素:
::after/::before/::first-letter/::first-line
::selection/:placeholder
疑似要素はどのタグにも存在し、自然に存在し、CSS を使用して変更できます。
例：
ページ上に表示される各 div タグに表示されるコピーの後に「I am div」というコピーを追加する場合は、次のようにします。
//css样式
div::after {
content: 我是div
}これは、各 div の HTML 構造にこれらの単語を追加するよりも簡単で、多くの冗長なコードが削除されます。もちろん、開発では通常、この作業に疑似要素を使用しません。結局のところ、あまりにも愚かなので、通常は疑似要素を使用して特定の div に三角形を追加したり、疑似要素を使用して float をクリアしたりします。
しかし、実際には、疑似要素は一重引用符で表すこともでき、最初に作成されたときにそのように使用されていましたが、疑似クラスと区別するために、二重コロン [:: を使用することが公式に推奨されています。 ] 擬似要素の場合。このため、ブラウザーの互換性の問題に対処する場合、疑似要素に単一のコロンを使用すると、下位互換性が向上します。
要約する
1. 擬似要素は新しい要素を作成し、擬似クラス自体は存在しますが特別な宣言は必要なく、必要に応じて使用できます。
2. 一般に、単一コロンを持つものは疑似クラス、二重コロンを持つものは疑似要素ですが、一部の疑似要素は単一コロンも使用でき、下位互換性が必要な場合は、最初に疑似要素を使用することをお勧めします。単一のコロン、その他の場合には、疑似クラスを区別するために常に二重コロンを使用することをお勧めします。
3. 同時に使用できる擬似要素は 1 つだけです。また、同時に複数の擬似クラスを使用できます。