ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS 疑似クラスと疑似要素の違いは何ですか?

CSS 疑似クラスと疑似要素の違いは何ですか?

Patricia Arquette
リリース: 2024-12-14 03:27:09
オリジナル
673 人が閲覧しました

What's the Difference Between CSS Pseudo-Classes and Pseudo-Elements?

CSS 疑似クラスと疑似要素の違い

概要

CSS 疑似クラスと疑似要素はどちらもセレクターの特異性を強化するために使用されます。 、しかし、それらは異なる役割を果たしますスタイリング。

擬似クラス

擬似クラスは、状態や動作に基づいて要素をターゲットにするために使用されます。コロン (:) で始まり、その後に括弧内のキーワードまたは値が続きます。疑似クラスには、ドキュメント構造からは導出できない次のような情報を含めることができます。

  • :hover - ホバー時
  • :active - クリック時
  • : target - のハッシュと一致する特定の ID を持つ要素URL

擬似要素

擬似要素は、ドキュメントには存在しないが、スタイルを設定したり操作したりできる仮想要素を作成します。二重コロン (::) で始まり、その後にキーワードが続きます。疑似要素は、他の方法では利用できないコンテンツや機能へのアクセスを提供します。

  • ::first-line - テキストの最初の行
  • ::before - 要素の前に挿入されるコンテンツ
  • ::after - 要素

キーの後に挿入されるコンテンツ違い

Feature Pseudo-Class Pseudo-Element
Purpose Selects elements Creates virtual elements
Syntax element:keyword element::keyword
Example a:hover p::before
Content Manipulation N/A Supports content generation and modification
Multiple Instances Multiple allowed Only one per selector

使用例

カーソルを合わせたときに「重要」クラスの要素に背景色を適用するには:

.important:hover {
  background-color: #FF0000;
}
ログイン後にコピー

言語タグを追加するにはの引用の後ページ:

q::after {
  content: " (Language: " attr(lang) ")";
}
ログイン後にコピー

概要

擬似クラスはコンテキストや動作に基づいて要素を選択するために使用され、擬似要素はアクセス可能なコンテンツとスタイル オプションを備えた仮想要素を作成します。この違いを理解することは、これらの高度な CSS テクニックを効果的に使用するために不可欠です。

以上がCSS 疑似クラスと疑似要素の違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート