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

CSS の疑似クラスは、特定の状態にある要素を選択するために使用されるセレクターです。これらの要素は、通常は表示されないか、HTML 要素自体のクラスや ID によって表されません。 CSS の疑似要素は要素の子要素に似ていますが、実際には実際の DOM ツリーの一部ではありません。疑似要素を使用すると、HTML マークアップを追加せずに要素の特定の部分にスタイルを適用できます。疑似クラスと疑似要素は、特定の要素または要素の状態を選択してスタイル設定する柔軟な方法を提供し、CSS の非常に便利なツールです。

このチュートリアルのオペレーティング システム: Windows 10 システム、DELL G3 コンピューター。

CSS では、疑似クラスと疑似要素は、特定の要素または要素の状態を選択およびスタイルするために使用できる特別な CSS セレクターです。

1. 擬似クラスは、特定の状態の要素を選択するために使用されるセレクターです。 これらの状態は通常、目に見えないか、HTML 要素自体のクラスや ID によって表されません。たとえば、:hover 疑似クラスを使用して、マウス ポインターが上にある要素を選択できます。

a:hover {  
    color: red;  
}

この例では、マウスをリンク ( 要素) の上に置くと、リンクの色が赤に変わります。

:hover に加えて、:active (ユーザーがアクティブ化した要素を選択)、:visited (ユーザーが訪問したリンクを選択) など、他にも多くの疑似クラスがあります。

2. 疑似要素は要素の子要素に似ていますが、実際には、実際の DOM ツリーの一部ではありません。 疑似要素を使用すると、追加の HTML マークアップを追加せずに、要素の特定の部分にスタイルを適用できます。たとえば、:before および :after 擬似要素を使用して、要素のコンテンツの前後にコンテンツまたはスタイルを挿入できます。

p:before {  
    content: "Hello, ";  
}  
  
p:after {  
    content: "world!";  
}

この例では、各段落 (

要素) の前にテキスト「Hello,」が挿入され、その後にテキスト「world!」が挿入されます。 content 属性は必須であり、擬似要素のコンテンツを定義することに注意してください。

:before と :after に加えて、:first-letter (要素の最初の文字を選択) や :first-line (最初の行を選択) など、他にもよく使用される疑似要素があります。要素の) 。

一般に、疑似クラスと疑似要素は、特定の要素または要素の状態を選択してスタイル設定するための柔軟な方法を提供し、CSS で非常に便利なツールです。

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