CSS セレクター プロパティの詳細な説明: ID、クラス、属性セレクター

CSS (Cascading Style Sheets) は、Web ページのスタイルを定義するために使用されるマークアップ言語で、Web ページのレイアウト、色、フォント、その他の視覚効果を定義します。 CSS では、セレクターは、スタイルを設定する HTML 要素を見つけて選択するために使用されるパターンです。セレクター属性には、さまざまな選択方法を表す ID、クラス、属性セレクターなどが含まれます。この記事では、これら 3 つのセレクター プロパティについて詳しく説明し、具体的なコード例を示します。

1. id セレクター

id ​​セレクターは、特定の要素に一意の id 属性を割り当てることによって要素を選択します。 id 属性の値は、HTML ドキュメント内で一意である必要があります。 CSS では、ID セレクターは # 記号と id 属性の値を使用して要素を選択します。

たとえば、id 属性を dc6dce4a544fdca2df29d5ac0ea9906b 要素に追加し、id セレクターを使用してスタイルを設定します。

<div id="myDiv">这是一个示例</div>

#myDiv {
  color: red;
  font-size: 16px;
}

上記のコードは、 ID セレクターの例。 ID セレクター #myDiv は、id 属性値「myDiv」を持つ dc6dce4a544fdca2df29d5ac0ea9906b 要素を選択し、そのテキストの色を赤に、フォント サイズを 16 ピクセルに設定します。一意の id 属性値を指定することで、特定の要素を選択してスタイルを設定できます。

2. クラス セレクター

クラス セレクターは、1 つ以上の要素に同じクラス名を割り当てることによって要素を選択します。 CSS では、クラス セレクターは . 記号の後にクラス名を使用して要素を選択します。

たとえば、同じクラス名を 2 つの e388a4556c0f65e1904146cc1a846bee 要素に追加し、クラス セレクターを使用してスタイルを設定します。

<p class="myClass">这是第一个段落</p>
<p class="myClass">这是第二个段落</p>

.myClass {
  background-color: yellow;
  padding: 10px;
}

上記のコードは、クラスの例を示しています。セレクターの。クラス セレクター .myClass は、クラス名「myClass」を持つすべての要素を選択し、背景色を黄色に設定し、10 ピクセルのパディングを追加します。同じクラス名を指定すると、要素のグループを選択し、それらを均一にスタイル設定できます。

3. 属性セレクター

属性セレクターは、特定の属性または属性値を持つ要素を選択することによって要素を選択します。 CSS では、属性セレクターは角括弧 [] に続いて属性名 (オプション: 属性値を追加することもできます) を使用して要素を選択します。

たとえば、title 属性を持つ a1f02c36ba31691bcfe87b2722de723b 要素を選択するには:

<img src="image.jpg" alt="图片" title="这是一个图片">

img[title] {
  border: 1px solid black;
}

上記のコードは、属性セレクターの例を示しています。属性セレクター img[title] は、title 属性を持つすべての a1f02c36ba31691bcfe87b2722de723b 要素を選択し、それらに黒い 1 ピクセルの境界線を追加します。 img[title="これは写真です"] など、特定の属性値をさらに指定して、タイトル属性値が「これは写真です」であるものだけが選択されるようにすることもできますa1f02c36ba31691bcfe87b2722de723b 要素。

要約すると、ID、クラス、属性セレクターは、よく使用される 3 つの CSS セレクター プロパティです。これらを適切に使用することで、Web ページ内の特定の要素を選択してスタイルを設定できます。この記事で提供されている具体的なコード例が、これらのセレクター プロパティをよりよく理解し、使用するのに役立つことを願っています。 CSS セレクターについてさらに質問がある場合は、関連するドキュメントまたはチュートリアルを参照して、さらに深く学習して習得することができます。

以上がCSS セレクター プロパティの詳細な説明: ID、クラス、属性セレクターの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。