CSS セレクター プロパティ ガイド: ID、クラス、属性セレクター

CSS セレクター プロパティ ガイド: ID、クラス、および属性セレクター

CSS (Cascading Style Sheets) は、Web ページ上の要素がどのようにレンダリングおよびレイアウトされるかを記述するために使用されます。言語の。 CSS では、セレクターを使用して特定の HTML 要素を選択し、スタイル ルールを適用します。

この記事では、3 つの一般的なセレクター属性 (ID、クラス、属性セレクター) に焦点を当て、具体的なコード例を示します。

1. id ​​セレクター

id ​​セレクターは、HTML 内で一意である必要がある特定の id 属性を持つ要素を選択するために使用されます。 CSS では、ID セレクターの構文はセレクター名の前に # 記号を付けます。以下に例を示します。

<div id="header">这是网页的页眉</div>

#header {
  background-color: blue;
  color: white;
}

上記のコードは、背景色が青、テキスト色が白の ID「header」を持つ div 要素を表しています。

2. クラス セレクター

クラス セレクターは、特定のクラス属性を持つ要素を選択するために使用されます。1 つの要素が複数のクラス属性を持つことができ、複数の要素が同じクラス属性を共有することができます。 CSS では、クラス セレクターの構文はセレクター名の前に . 記号を追加します。以下は例です:

<p class="highlight">这是一个高亮的段落</p>

.highlight {
  background-color: yellow;
  font-weight: bold;
}

上記のコードは、クラス「ハイライト」の p 要素を表します。その背景色は黄色で、テキストは太字です。

3. 属性セレクター

属性セレクターは、特定の属性を持つ要素を選択するために使用され、属性値に基づいて選択できます。 CSS では、属性セレクターの構文にはさまざまな形式があります。以下にいくつかの例を示します:

• 特定の属性を持つ要素を選択します:

<a href="#">这是一个链接</a>

a[href] {
  color: blue;
}

上記のコードは、href 属性を持つすべての要素を選択し、そのテキストの色を変更することを意味します。青。

• 特定の属性と属性値を持つ要素を選択します:

<input type="text" value="请输入用户名">

input[type="text"] {
  width: 200px;
}

上記のコードは、type 属性が「text」であるすべての入力要素を選択し、その幅を 200px に設定することを意味します。 。

• 特定の属性値で始まる要素を選択:

<img src="images/logo.png" alt="Logo">
<img src="images/banner.jpg" alt="Banner">

img[src^="images/"] {
  border: 1px solid gray;
}

上記のコードは、src 属性値が「images/」で始まるすべての img 要素を選択して追加することを意味します。灰色の境界線。

概要:

ID、クラス、属性セレクターを使用すると、Web ページ上の要素をより正確に選択し、それらに特定のスタイルを適用できます。実際の開発では、これらのセレクターを柔軟に使用することで、CSS の再利用性と保守性を向上させることができます。

上記は、CSS セレクター プロパティ ガイドの簡単な紹介であり、対応するコード例を示しています。皆さんが CSS セレクターを理解し、使用するのに役立つことを願っています。

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