CSS 属性选择器

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

了解属性选择器

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

你可以通过将属性（可选是否带有值）放在一对方括号中来创建属性选择器。你也可以在它之前放置一个元素类型选择器。

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

CSS [attribute]选择器

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

[title] {
    color: blue;
}

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

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

abbr[title] {
    color: red;
}

选择器 abbr[title] 仅匹配具有 title 属性的 <abbr> 元素，因此它能与 abbr 匹配，但不匹配具有 title 属性的anchor元素。

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;
}

此选择器将任何 HTML 元素与 class 包含空格分隔值的属性进行匹配，其中一个值为 warning 。例如，它与具有类值 warning ， alert warning 等等的元素相匹配。

CSS [attribute | = “value” ]选择器

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

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

上例中的选择器匹配具有开头为 en 的 lang 属性的所有元素，无论该值是否后跟连字符和更多字符。换句话说，它匹配所有属性值为 en en-US en-GB 的 lang 属性的元素，但不匹配下面的属性值 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;
}