css3セレクターとは何ですか?

CSS3 セレクターは CSS3 の一部であり、HTML ドキュメント内の要素を選択するために使用されます。タイプ、属性、ステータス、場所などの基準に基づいて要素を選択できます。

次に、一般的に使用される CSS3 セレクターとそのコード例を示します。

1. 要素セレクター (要素セレクター):
   要素を名前で選択します。

   サンプル コード:

   p {
     color: red;
   }

   上記のコードは、すべての <p></p> 要素を選択し、その色を赤に設定します。

2. クラス セレクター:
   クラス属性を使用して要素を選択します。

   サンプル コード:

   .highlight {
     background-color: yellow;
   }

   上記のコードは、「ハイライト」クラスを持つすべての要素を選択し、背景色を黄色に設定します。

3. ID セレクター:
   id ​​属性を使用して要素を選択します。

   サンプル コード:

   #main-title {
     font-size: 24px;
   }

   上記のコードは、「main-title」ID を持つ要素を選択し、そのフォント サイズを 24 ピクセルに設定します。

4. 属性セレクター:
   属性値によって要素を選択します。

   サンプル コード:

   input[type="text"] {
     border: 1px solid gray;
   }

   上記のコードは、type 属性が "text" であるすべての入力要素を選択し、その境界線を灰色に設定します。

5. 疑似クラス セレクター:
   :hover、:nth -child() などの特別なステータスを通じて要素を選択します。等

   サンプル コード:

   a:hover {
     color: blue;
   }

   上記のコードは、マウスがリンク上にあるときに <a></a> 要素を選択し、その色を青に設定します。

6. 擬似要素セレクター:
   ::before、::after などの特別な位置で要素を選択します。

   サンプル コード:

   p::before {
     content: "Chapter: ";
     font-weight: bold;
   }

   上記のコードは、各 <p></p> 要素の前にコンテンツ「Chapter:」を持つ疑似要素を追加し、それを追加します。フォントは太字です。

これは CSS3 セレクターのほんの一部であり、より具体的な選択に使用できる他にも多くのセレクターがあります。これらのセレクターを適切に使用すると、HTML ドキュメント内の要素をより正確に選択し、スタイルを設定できます。

以上がcss3セレクターとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。