css属性选择器 – CSS高级教程

上一章CSS高级教程请查看：css透明度opacity

属性选择器选择具有特定属性或具有指定值的属性的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;
}

上面示例中的选择器匹配所有<input>元素，该元素的类型属性的值等于submit。

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

你可以使用~=操作符使属性选择器匹配属性值为空格分隔值列表(如class=”alert warning”)的任何元素，其中一个元素的属性值正好等于指定的值:

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

这个选择器匹配任何包含空格分隔值的class属性的HTML元素，其中一个是警告。例如，它匹配具有类值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;
}

上面示例中的这个选择器将所有HTML元素与一个class属性(其值包含warning)相匹配。例如，它匹配具有类值warning、alert warning、alert-warning或alert_warning等的元素。

使用属性选择器设计表单的样式

属性选择器在设计没有类或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;
}