CSS 疑似クラスと疑似要素の一般的な使用法と例を解析する

CSS 疑似クラスと疑似要素の一般的な使用法と分析例を詳しく調査します

フロントエンド開発では、CSS はよく使用されるスタイル デザインの 1 つです。言語。基本的なセレクターと属性に加えて、CSS は疑似クラスと疑似要素と呼ばれるいくつかの特別なセレクターも提供します。この記事では、CSS 疑似クラスと疑似要素の一般的な使用法と分析例を詳しく説明し、具体的なコード例を添付します。

1. 疑似クラスの一般的な使用法と分析例

1. :hover 疑似クラス

:hover 疑似クラスはマウスホバーに使用されます要素上にマウスを置くとスタイルを設定します。たとえば、単純なボタンの動的エフェクトを作成できます。コード例は次のとおりです。

<style>
   .btn {
      padding: 10px 20px;
      background-color: #ccc;
      color: #fff;
   }
   .btn:hover {
      background-color: #f00;
   }
</style>
<button class="btn">悬停按钮</button>

この例では、ホバーするとボタンの背景色が赤に変わります。

2. :active pseudo-class

:active pseudo-class は、要素がアクティブ化された (クリックされた) ときにスタイルを設定するために使用されます。たとえば、単純なボタンのクリック効果を作成できます。コード例は次のとおりです。

<style>
   .btn {
      padding: 10px 20px;
      background-color: #ccc;
      color: #fff;
   }
   .btn:active {
      background-color: #f00;
   }
</style>
<button class="btn">点击按钮</button>

この例では、クリックするとボタンの背景色が赤に変わります。

3. :nth-child pseudo-class

:nth-child pseudo-class は、親要素の下の特定の位置にある子要素を選択するために使用されます。たとえば、リスト内の奇数行と偶数行に異なる背景色を設定できます。コード例は次のとおりです。

<style>
   li:nth-child(odd) {
      background-color: #ccc;
   }
   li:nth-child(even) {
      background-color: #f00;
   }
</style>
<ul>
   <li>列表项1</li>
   <li>列表项2</li>
   <li>列表项3</li>
   <li>列表项4</li>
</ul>

この例では、リストの奇数行の背景色は灰色、偶数行の背景色は赤です。

2. 疑似要素の一般的な使用法と分析例

1. ::before pseudo-element

::before pseudo-element が使用される前特定の要素 コンテンツの前に要素を挿入し、その要素にスタイルを設定します。たとえば、段落の前にタグを追加し、そのスタイルを設定できます。コード例は次のとおりです。

<style>
   p::before {
      content: "前面插入的元素";
      background-color: #ccc;
   }
</style>
<p>段落内容</p>

この例では、段落の前に灰色の背景色が表示され、「以前に挿入された要素」というテキストが表示されます。

2. ::after pseudo-element

::after pseudo-element は、要素のコンテンツの後に要素を挿入し、その要素にスタイルを設定するために使用されます。たとえば、段落の後にタグを追加し、それにスタイルを設定できます。コード例は次のとおりです。

<style>
   p::after {
      content: "后面插入的元素";
      background-color: #ccc;
   }
</style>
<p>段落内容</p>

この例では、段落の後に灰色の背景色が表示され、「後に挿入された要素」というテキストが表示されます。

3. ::first-letter 擬似要素

::first-letter 擬似要素は、要素の最初の文字を選択し、それにスタイルを設定するために使用されます。たとえば、段落の最初の文字に特別なスタイルを設定できます。コード例は次のとおりです。

<style>
   p::first-letter {
      font-size: 24px;
      color: #f00;
   }
</style>
<p>首字母大写的段落内容</p>

この例では、段落の最初の文字が赤になり、フォント サイズが 24 ピクセルに拡大されます。

この記事では、CSS の疑似クラスと疑似要素の一般的な使用法と分析例を詳しく調査し、具体的なコード例を添付します。擬似クラスと擬似要素を合理的に使用することで、ページのスタイルをより柔軟に制御し、より豊かなインタラクティブ効果や視覚効果を実現できます。この記事が皆様のフロントエンド開発業務のお役に立てれば幸いです。

以上がCSS 疑似クラスと疑似要素の一般的な使用法と例を解析するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。