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

疑似要素と疑似クラスは CSS で一般的に使用される 2 つの概念であり、ページ内の特定の要素のスタイルと動作を制御するために使用されます。名前は似ていますが、実は機能や使い方が異なります。

まず、擬似要素を見てみましょう。疑似要素は、選択した要素内に仮想要素を作成し、スタイルを設定するために使用されます。これは、選択した要素のコンテンツの前後にコンテンツを挿入することによって行われます。疑似要素は二重コロン (::) で始まります。一般的に使用される疑似要素をいくつか示します:

1. ::before: 選択した要素のコンテンツの前に仮想要素を挿入します。
2. ::after: 選択した要素のコンテンツの後に仮想要素を挿入します。
3. ::first-line: 選択した要素のテキストの最初の行を選択します。
4. ::first-letter: 選択した要素の最初の文字を選択します。

たとえば、疑似要素::before:

p::before {
  content: '"';
}

を使用して、段落の前に引用番号を挿入できます。このようにして、各段落の前に引用番号が表示されます。

次に、疑似クラスを見てみましょう。疑似クラスは、要素の特定の状態または位置を選択するために使用されます。セレクターにコロン (:) を追加することで実装されます。疑似クラスは任意の要素に適用できます。一般的に使用される疑似クラスをいくつか示します。

1. :hover: マウスが要素上にあるときにスタイルを適用します。
2. :focus: 要素がフォーカスを取得したときにスタイルを適用します。
3. :active: 要素をクリックするとスタイルが適用されます。
4. :first-child: 選択した要素の親要素内の最初の子要素。

たとえば、pseudo-class:hover を使用してボタンのスタイルを変更し、マウス ホバー効果を実現できます。

button:hover {
  background-color: red;
  color: white;
}

マウスがボタンの上にホバーすると、ボタンの背景色が赤に、文字の色が白に変わります。

要約すると、擬似要素は仮想要素を作成してスタイルを設定するために使用され、擬似クラスは要素の特定の状態または位置を選択するために使用されます。疑似要素と疑似クラスの違いを理解することで、CSS の適用をよりよく習得し、さまざまなスタイルやインタラクティブな効果をページに追加できます。

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