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

疑似要素と疑似クラスは CSS の 2 つの重要な概念であり、Web デザインにおいて非常に重要な役割を果たします。この記事では、疑似要素と疑似クラスの違いと機能を詳しく紹介し、具体的なコード例を示します。

1. 疑似要素
疑似要素は、ドキュメント内に要素を仮想的に作成する方法です。疑似要素は二重コロン (::) で表されます。一般的な疑似要素には次のものが含まれます:

1. ::before 疑似要素:
   ::before 疑似要素は要素の選択に使用されます。ダミー要素が前にあります。疑似要素のコンテンツは、content 属性を通じて設定できます。

サンプルコード:

<style>
    p::before {
        content: "前方的虚拟元素";
        color: red;
    }
</style>
<p>这是正常的段落。</p>

上記のコードでは、段落要素の前に赤字で「先頭にダミー要素」が挿入されます。

2. ::after 擬似要素:
   ::after 擬似要素は、選択した要素の背後に仮想要素を作成するために使用されます。content 属性を使用して、コンテンツのコンテンツを設定することもできます。擬似要素。

サンプルコード:

<style>
    p::after {
        content: "后方的虚拟元素";
        color: blue;
    }
</style>
<p>这是正常的段落。</p>

上記のコードでは、段落要素の後に青色の文字「後方仮想要素」が挿入されます。

2. 擬似クラス
擬似クラスは、特定の要素の変更された状態を選択したり、特定の位置にある要素を選択したりするために使用されます。疑似クラスは単一のコロン (:) で表されます。一般的な疑似クラスには次のものが含まれます:

1. :hover 疑似クラス:
   :hover 疑似クラスは要素の選択に使用されますマウスホバリング時のステータス。

サンプル コード:

<style>
    a:hover {
        color: red;
    }
</style>
<a href="#">鼠标悬停时变为红色</a>

上記のコードは、マウスがリンク上にあるときにフォントの色を赤に設定します。

2. :active pseudo-class:
   :active pseudo-class は、要素がアクティブ化される状態を選択するために使用されます。通常は、要素上でマウスが押されたがまだアクティブになっていないときの状態です。解放された。

サンプル コード:

<style>
    button:active {
        background-color: blue;
    }
</style>
<button>按钮</button>

上記のコードは、ボタンが押されて離されなかった場合に背景色を青に設定します。

3. :nth-child 擬似クラス:
   :nth-child 擬似クラスは、要素の指定された子要素を選択するために使用されます。

サンプル コード:

<style>
    li:nth-child(2) {
        color: red;
    }
</style>
<ul>
    <li>第一个元素</li>
    <li>第二个元素</li>
    <li>第三个元素</li>
</ul>

上記のコードは、リスト内の 2 番目の li 要素を選択し、そのテキストの色を赤に設定します。

概要:
疑似要素と疑似クラスは、CSS で重要な役割を果たします。擬似要素は選択した要素の前後に仮想要素を作成するために使用され、擬似クラスは特定の要素の状態または位置を選択するために使用されます。擬似要素や擬似クラスを柔軟に活用することで、Webページのスタイルをより豊富かつ細かく制御することができます。

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