CSS 属性 选择器
使用特定属性样式化 HTML 元素
可以样式化具有特定属性或属性值的 HTML 元素。
CSS [属性] 选择器
[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"] 选择器用于选择具有指定属性的元素，其属性值以指定的精确值开头。
以下示例选择所有具有以“top”开头的 class 属性值的元素
注意：该值不必是一个完整的单词！
CSS [attribute$="value"] 选择器
[attribute$="value"] 选择器用于选择其属性值以指定值结尾的元素。
以下示例选择所有具有以“test”结尾的 class 属性值的元素
注意：该值不必是一个完整的单词！
CSS [attribute*="value"] 选择器
[attribute*="value"] 选择器用于选择其属性值包含指定值的元素。
以下示例选择所有具有包含“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"] | 选择所有 <a> 元素，其 href 属性值以 "https" 开头 |
| [attribute$=value] | a[href$=".pdf"] | 选择所有 <a> 元素，其 href 属性值以 ".pdf" 结尾 |
| [attribute*=value] | a[href*="w3schools"] | 选择所有 <a> 元素，其 href 属性值包含子字符串 "w3schools" |
