CSS 屬性選擇器
使用特定屬性樣式 HTML 元素
可以為具有特定屬性或屬性值的 HTML 元素設定樣式。
CSS [attribute] 選擇器
[attribute] 選擇器用於選擇具有指定屬性的元素。
以下示例選擇所有具有 target 屬性的 <a> 元素
CSS [attribute="value"] 選擇器
[attribute="value"] 選擇器用於選擇具有指定屬性和值的元素。
以下示例選擇所有 target="_blank" 屬性的 <a> 元素
CSS [attribute~="value"] 選擇器
[attribute~="value"] 選擇器用於選擇屬性值包含指定單詞的元素。
以下示例選擇所有 title 屬性值包含以空格分隔的單詞列表（其中一個單詞是 "flower"）的元素
上面的示例將匹配 title="flower"、title="summer flower" 和 title="flower new" 的元素，但不匹配 title="my-flower" 或 title="flowers" 的元素。
CSS [attribute|="value"] 選擇器
[attribute|="value"] 選擇器用於選擇具有指定屬性的元素，其值可以是完全相同的指定值，也可以是指定值後跟一個連字元（-）。
注意：該值必須是一個完整的單詞，要麼單獨存在，如 class="top"，要麼後面跟著一個連字元（-），如 class="top-text"。
CSS [attribute^="value"] 選擇器
[attribute^="value"] 選擇器用於選擇具有指定屬性的元素，其屬性值以指定值開頭。
以下示例選擇所有 class 屬性值以 "top" 開頭的元素
注意：該值不必是完整的單詞！
CSS [attribute$="value"] 選擇器
[attribute$="value"] 選擇器用於選擇屬性值以指定值結尾的元素。
以下示例選擇所有 class 屬性值以 "test" 結尾的元素
注意：該值不必是完整的單詞！
CSS [attribute*="value"] 選擇器
[attribute*="value"] 選擇器用於選擇屬性值包含指定值的元素。
以下示例選擇所有 class 屬性值包含 "te" 的元素
注意：該值不必是完整的單詞！
樣式表單
屬性選擇器在不使用 class 或 ID 的情況下樣式化表單很有用
示例
input[type="text"] {
width: 150px;
display: block;
margin-bottom: 10px;
background-color: yellow;
}
input[type="button"] {
width: 120px;
margin-left: 35px;
display: block;
}
自己動手試一試 »
提示：訪問我們的 CSS 表單教程，瞭解更多關於如何使用 CSS 樣式表單的示例。
所有 CSS 屬性選擇器
| 選擇器 | 示例 | 示例描述 |
|---|---|---|
| [attribute] | [target] | 選擇所有具有 target 屬性的元素 |
| [attribute=value] | [target="_blank"] | 選擇所有 target="_blank" 的元素 |
| [attribute~=value] | [title~="flower"] | 選擇所有 title 屬性值包含以空格分隔的單詞列表（其中一個單詞是 "flower"）的元素 |
| [attribute|=value] | [lang|="en"] | 選擇所有 lang 屬性值以 "en" 開頭的元素 |
| [attribute^=value] | a[href^="https"] | 選擇所有 href 屬性值以 "https" 開頭的 <a> 元素 |
| [attribute$=value] | a[href$=".pdf"] | 選擇所有 href 屬性值以 ".pdf" 結尾的 <a> 元素 |
| [attribute*=value] | a[href*="w3schools"] | 選擇所有 href 屬性值包含子字串 "w3schools" 的 <a> 元素 |
