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> 元素 |
