CSS 属性选择器

属性选择器选择具有特定属性或具有指定值的属性的 HTML 元素。

了解属性选择器

CSS 属性选择器提供了一种简单而强大的方法来根据特定 属性或属性值 的存在将样式应用于 HTML 元素。

您可以通过将属性 —可选地带有一个值— 放在一对方括号中来创建属性选择器。 你也可以在它前面放一个 元素类型选择器。

以下部分描述了最常见的属性选择器。

CSS [attribute] 选择器

这是属性选择器的最简单形式，如果给定属性存在，它将样式规则应用于元素。 例如，我们可以使用以下样式规则为所有具有 title 属性的元素设置样式：

[title] {
    color: blue;
}

上面示例中的选择器 [title] 匹配所有具有 title 属性的元素。

您还可以通过将属性选择器放在元素类型选择器之后来将此选择限制为特定的 HTML 元素，如下所示：

abbr[title] {
    color: red;
}

选择器 abbr[title] 仅匹配具有 title 属性的 <abbr> 元素，因此它匹配缩写，但不匹配具有 title 属性的 锚点 元素。

CSS [attribute="value"] 选择器

您可以使用 = 运算符使属性选择器匹配任何属性值与给定值完全相等的元素：

input[type="submit"] {
    border: 1px solid green;
}

上例中的选择器匹配所有具有 type 属性且值等于 submit 的 <input> 元素。

CSS [attribute~="value"] 选择器

您可以使用 ~= 运算符使属性选择器匹配其属性值为 空格分隔 值列表（如 class="alert warning"）的任何元素，其中一个值与指定值完全相等：

[class~="warning"] {
    color: #fff;
    background: red;
}

此选择器匹配任何具有 class 属性的 HTML 元素，该属性包含空格分隔的值，其中之一是 warning。 例如，它匹配具有类值 warning, alert warning 等的元素。

CSS [attribute|="value"] 选择器

您可以使用 |= 运算符使属性选择器匹配其属性具有以指定值开头的 连字符分隔 值列表的任何元素：

[lang|=en] {
    color: #fff;
    background: blue;
}

上面示例中的选择器匹配所有具有 lang 属性的元素，该属性包含以 en 开头的值，无论该值后面是否有连字符和更多字符。 换句话说，它匹配具有 lang 属性且值为 en, en-US, en-GB 的元素，依此类推，但不匹配 US-en, GB-en。

CSS [attribute^="value"] 选择器

您可以使用 ^= 运算符使属性选择器匹配其属性值以指定值开头的任何元素。 它不必是一个完整的词。

a[href^="http://"] {
    background: url("external.png") 100% 50% no-repeat;
    padding-right: 15px;
}

上面示例中的选择器将针对所有外部链接并添加一个小图标，指示它们将在新选项卡或窗口中打开。

CSS [attribute$="value"] 选择器

类似地，您可以使用 $= 运算符选择属性值以指定值结尾的所有元素。 它不必是一个完整的词。

a[href$=".pdf"] {
    background: url("pdf.png") 0 50% no-repeat;
    padding-left: 20px;
}

上面示例中的选择器选择链接到 PDF 文档的所有 <a> 元素，并添加一个小的 PDF 图标以向用户提供有关链接的提示。

CSS [attribute*="value"] 选择器

您可以使用 *= 运算符使属性选择器匹配其属性值包含指定值的所有元素。

[class*="warning"] {
    color: #fff;
    background: red;
}

上例中的这个选择器匹配所有具有 class 属性且值包含 warning 的 HTML 元素。 例如，它匹配具有类值 warning, alert warning, alert-warning 或 alert_warning 等的元素。

使用属性选择器为表单设置样式

属性选择器对于没有 class 或 id 的表单样式特别有用：

input[type="text"], input[type="password"] {
    width: 150px;
    display: block;
    margin-bottom: 10px;
    background: yellow;
}
input[type="submit"] {
    padding: 2px 10px;
    border: 1px solid #804040;
    background: #ff8040;
}