疑似要素と疑似クラスの定義と違いを理解する-CSSチュートリアル-php.cn

疑似要素と疑似クラスの定義と違いを理解する

WBOY

リリース： 2024-01-05 09:20:29

オリジナル

690 人が閲覧しました

擬似要素と擬似クラスの概念と違いの分析

擬似要素と擬似クラスはどちらも CSS の重要な概念であり、開発者に次の機能を提供します。 HTML ドキュメント内の特定の要素または要素の一部の選択を柔軟に制御できます。見た目は似ていますが、使い方や意味は異なります。

まず、擬似要素の概念を理解しましょう。擬似要素は、特別なスタイルを追加できる選択した要素の一部であり、選択した部分をドキュメント内の実際の要素のように見せることができます。セレクターでは、疑似要素は二重コロン (::) で表されます。一般的な疑似要素には、::before、::after、::first-line、および ::first-letter が含まれます。。このうち、::before と ::after は、要素のコンテンツの前後にコンテンツを挿入するために使用されます。例:

p::before {
  content: "开始 - ";
}

p::after {
  content: " - 结束";
}

ログイン後にコピー

上記のコードは、すべての  要素の前に「start -」を追加し、要素に追加のコンテンツを追加するために「-end」を追加します。

もう 1 つの一般的な疑似要素は ::first-line です。これは、スタイル設定のために要素内のテキストの最初の行を選択するために使用されます。例:

p::first-line {
  font-weight: bold;
  color: blue;
}

ログイン後にコピー

上記のコードは太字になり、各  要素のテキストの最初の行のフォントが青に設定されます。

次に、疑似クラスの概念を見てみましょう。疑似クラスは、マウスオーバー、クリック、要素の位置関係などのセレクターを通じて要素の特定の状態に適用されます。疑似クラスは単一のコロン (:) で表されます。一般的な疑似クラスには、:hover、:active、:visited、および :first-child が含まれます。例:

a:hover {
  color: red;
}

li:first-child {
  font-weight: bold;
}

ログイン後にコピー

上記のコードでは、マウスを <a> ラベルの上に置くと、テキストの色が赤に変わり、

<li># を押すと、テキストの色が赤に変わります。 # #element がその親要素の最初の子要素である場合、フォントは太字になります。

要約すると、擬似要素は要素の一部を選択し、追加のコンテンツやスタイルを追加することで要素を変更できます。擬似クラスは要素の特定の状態を選択し、相互作用やその他の条件に基づいて要素のスタイルを変更するために使用されます。

疑似要素では二重コロン (::) が使用されますが、疑似クラスでは単一コロン (:) が使用されることに注意してください。 CSS3 バージョンより前のバージョンでは、疑似要素には単一のコロンが使用されていましたが、下位互換性のために、引き続き単一のコロンを使用して疑似要素を表すことができますが、二重コロンを使用することをお勧めします。

実際の開発では、擬似要素や擬似クラスがよく使われます。これらは開発者に、HTML ドキュメント内の要素をより適切に制御および変更するための柔軟性と利便性を提供します。

この記事が、擬似要素と擬似クラスの概念と違いを分析するのに役立つことを願っています。これは、それらを理解し、ページスタイルを変更するために使用する上で重要な役割を果たします。

コードサンプル:

<!DOCTYPE html>
<html>
<head>
  <style>
    p::before {
      content: "开始 - ";
    }

    p::after {
      content: " - 结束";
    }

    p::first-line {
      font-weight: bold;
      color: blue;
    }

    a:hover {
      color: red;
    }

    li:first-child {
      font-weight: bold;
    }
  </style>
</head>
<body>
  <p>这是一个段落。</p>

  <ul>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
  </ul>

  <a href="#">这是一个链接</a>
</body>
</html>

ログイン後にコピー

上記は、疑似要素と疑似クラスを含む単純なサンプルコードです。HTML ファイルとして保存し、ブラウザで開くと、その内容を確認できます。効果。

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