ホームページ > 記事 > ウェブフロントエンド > CSS3の擬似クラスと擬似要素の違いと注意点について
CSS の擬似クラスと擬似要素の概念は混同されやすいです
今日は擬似クラスと擬似要素の違いについて話しましょう
まず、擬似を見てみましょうクラスと擬似要素
w3cの定義はこのように説明されています
擬似クラス: 特定のセレクターに特殊効果を追加するために使用されます
擬似要素: 特定のセレクターに特殊効果を追加するために使用されます
正直に言うと、私の中国語は下手かもしれませんが、これら 2 つの文は同等だと思います:-)
違いがまったくわかりません
それらはすべて特定のセレクターに「特殊効果を追加」しているだけです
標準このような文の翻訳は次のようになります
疑似クラスと疑似要素CSSは、ドキュメントツリー
に基づいた情報のフォーマットを実現するために、
の概念を導入します。これはより抽象的ですが、実際にはこれは、class、id などの要素を選択して
を補うことはできないことを意味します。この違いを理解するには例が必要です
<p> <em>This</em> <em>is a text</em></p>
最初の em タグのフォントの色が必要な場合はどうなるでしょうか赤に変わります
私たちがよく知っている疑似クラスは非常に単純です
em:first-child { color: red;}
しかし、疑似クラスがない場合はどうすればよいでしょうか?これが、最初の em タグにクラスを追加する必要がある理由です
<p> <em class="first-child">This</em> <em>is a text</em></p>
em.first-child { color: red;}同じ効果が得られます
<p> <em>This</em> <em>is a text</em></p>
次に、この段落の最初の文字を赤にしたいです
その方法
今回は疑似要素を使用する必要があります
p::first-letter { color: red;}擬似要素は存在しないということです
現時点では、span タグをネストすることでのみ実現できます
<p> <em><span>T</span>his</em> <em>is a text</em></p>
p span { color: red;}
それらの本質的な違いは、
抽象化によって新しい要素が作成されるかどうかです
歴史
それらの概念は混乱しやすいですが
、通常の使用には影響しません
で述べました。 CSS3セレクターの紹介と使い方まとめ
疑似クラスは「:」のみ使用可能
ここでその理由を説明します
CSS3の標準では、疑似クラスは単一のコロン「:」
つまり、疑似要素との互換性を確保するため、疑似要素を使用する両方の方法が可能です
ただし、IE の低バージョンにはダブルコロンの互換性の問題があります
そのため、過去にスタイルを作成した人々は、疑似クラスと疑似要素について異なる意見を持っていました。単に単一のコロンを使用するだけです
、この混乱は永遠に続きます
注意
相互に排他的でない限り、数に上限はありません
例えばこんな感じ
em:first-child:hover { color: red;}
と「hover」カーソルホバーの両方を満たす必要があります
疑似要素ははるかに厳密です
(ここで一部の学生が誤解していたので、修正しました) 以下のようなスタイルは有効になりません
p::first-letter:hover { /*错误的写法:伪元素不是末尾*/ color: red;}
p::first-letter::selection { /*错误的写法:伪元素出现了多个*/ color: red;}
重みを計算するとき 疑似クラスの優先順位は同じですクラスとして 疑似要素はタグと同じ優先順位を持ちます
概要
以上がCSS3の擬似クラスと擬似要素の違いと注意点についての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。