CSS 属性选择器

CSS 属性セレクターは、要素の属性または属性値に基づいて HTML 要素を選択するために使用されます。

属性セレクターは、要素にクラスやIDを追加する必要なしに、その要素をスタイル設定するのに役立ちます。

注意：IE7 と IE8 では宣言が必要です!DOCTYPEようやく属性セレクターをサポートしました！IE6 およびそれ以前のバージョンは属性セレクターをサポートしていません。

以下は一般的な CSS 属性セレクターです：

1、[attribute]

指定された属性を持つすべての要素を選択します（属性値が何であっても）。

/* 选择所有具有 `type` 属性的元素 */
[type] {
  border: 1px solid red;
}

2、[attribute="value"]

指定された属性と値が完全に一致する要素を選択します。

/* 选择所有 `type` 属性等于 `text` 的元素 */
[type="text"] {
  background-color: yellow;
}

3、[attribute~="value"]

属性値の中に指定された単語（スペース区切りの単語リストの1つ）を含む要素を選択します。

/* 选择属性值中包含 `button` 的元素 */
[class~="button"] {
  font-weight: bold;
}

4、[attribute|="value"]

指定された値を持つ、または指定された値で始まりその直後にハイフン - が続く属性値を持つ要素を選択します。言語コードによく使われます。

/* 选择所有 `lang` 属性是 `en` 或者以 `en-` 开头的元素 */
[lang|="en"] {
  color: green;
}

5、[attribute^="value"]

属性値が指定された値で始まる要素を選択します。

/* 选择所有 `href` 属性以 `https` 开头的链接 */
[href^="https"] {
  text-decoration: none;
}

6、[attribute$="value"]

属性値が指定された値で終わる要素を選択します。

/* 选择所有 src 属性以 .jpg 结尾的图片 */
[src$=".jpg"] {
  border: 2px solid blue;
}

7、[attribute*="value"]

属性値の中に指定された値を含む要素を選択します。

/* 选择所有 `title` 属性中包含 `tutorial` 的元素 */
[title*="tutorial"] {
  font-style: italic;
}

属性セレクターを使用すると、要素を簡単に選択し、それらの属性に基づいて特定のスタイルを設定できます。柔軟性と保守性が向上します。

属性选择器

次の例では、タイトル（title）を含むすべての要素を青色に変更します：

属性と値のセレクタ

以下の例では、title='サンプル' 要素の枠線スタイルを変更しています:

属性と値のセレクター - 複数の値

以下は、指定した値を含む title 属性を持つ要素のスタイルの例です。（~）を使用して属性と値を区切ります：

以下は、指定した値を含む lang 属性を持つ要素のスタイルの例です。（|）を使用して属性と値を区切ります：

表单样式

属性セレクターのスタイルは、class や id を使用する必要はありません：