一般的な CSS セレクター分類の概要

一般的な CSS セレクターの分類と具体的なコード例

CSS セレクターは、HTML ドキュメントの要素を選択し、それらに特定のスタイルを与えるために使用されるツールです。効率的な CSS スタイルシートを作成するには、さまざまなタイプの CSS セレクターを習得することが重要です。以下は、一般的な CSS セレクター カテゴリと具体的なコード例です。

1. 要素セレクター
   要素セレクターは、最も一般的な CSS セレクターです。タグ名を選択することで要素を選択します。たとえば、次のスタイルを使用してすべての段落要素を選択できます。

p {
  color: blue;
}

2. クラス セレクター (クラス セレクター)
   クラス セレクターは、HTML に class 属性を追加することによって追加されます。要素とピリオドを使用して識別します。これにより、同じスタイルをドキュメント内の複数の要素に適用できます。例は次のとおりです。

.button {
  background-color: red;
}

HTML での使用方法:

<button class="button">Click me</button>

3. ID セレクター (ID セレクター)
   ID セレクターは、id 属性をHTML 要素 。シャープ記号で識別されます。これは、1 つの要素のみに特定のスタイルを適用する必要がある状況に適しています。コード例は次のとおりです。

#header {
  background-color: yellow;
}

HTML での使用方法:

<header id="header">This is the header</header>

4. 子セレクター (子セレクター)
   子セレクターは、特定のオブジェクトを選択できます。要素の直接の子。これは、大なり記号 (>) によって識別されます。次のコードは、すべての段落要素の直接の子要素スパンを選択し、フォントの色を赤に設定します。

p > span {
  color: red;
}

<p>This is a <span>red</span> text.</p>

5. 子孫セレクター (子孫セレクター)
   子孫セレクターは、特定の要素を選択できます。要素のすべての子孫要素。スペースを使用して表現されます。次のコードは、すべての段落要素内のスパン要素を選択し、背景色を灰色に設定します。

p span {
  background-color: gray;
}

<p>This is a <span>gray</span> text.</p>

6. 隣接兄弟セレクター (隣接兄弟セレクター)
   隣接兄弟セレクターは、兄弟要素を選択できます。要素の直後。プラス記号 ( ) で識別されます。次のコードは、すべての h2 要素の直後にある p 要素を選択し、フォントの色を青に設定します。

h2 + p {
  color: blue;
}

<h2>Heading 2</h2>
<p>This paragraph is immediately following the h2 element.</p>

7. ユニバーサル セレクター (ユニバーサル セレクター)
   ユニバーサル セレクターは、HTML ドキュメントをすべて選択できます。の要素。アスタリスク (*) で表されます。次のコードは、ページ上のすべての要素を選択し、境界線を 1 ピクセルに設定します。

* {
  border: 1px solid black;
}

上記は、一般的な CSS セレクター カテゴリとそのサンプル コードです。さまざまなタイプのセレクターとその使用法を理解すると、CSS スタイル シートをより柔軟かつ正確に作成できるようになります。より具体的な要素の選択とスタイル定義のために CSS セレクターを使用すると、セレクターの結合とネストも可能であることに留意してください。

以上が一般的な CSS セレクター分類の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。