CSS 属性选择器详解

w3school 在线教程

## CSS 基础教程

- CSS 教程
- CSS 简介
- CSS 基础语法
- CSS 高级语法
- CSS 派生选择器
- CSS id 选择器
- CSS 类选择器
- CSS 属性选择器
- CSS 创建

## CSS 样式

- CSS 背景
- CSS 文本
- CSS 字体
- CSS 链接
- CSS 列表
- CSS 表格
- CSS 轮廓

## CSS 框模型

- CSS 框模型概述
- CSS 内边距
- CSS 边框
- CSS 外边距
- CSS 外边距合并

## CSS 定位

- CSS 定位概述
- CSS 相对定位
- CSS 绝对定位
- CSS 浮动

## CSS 选择器

- CSS 元素选择器
- CSS 选择器分组
- CSS 类选择器详解
- CSS ID 选择器详解
- CSS 属性选择器详解
- CSS 后代选择器
- CSS 子元素选择器
- CSS 相邻兄弟选择器
- CSS 伪类
- CSS 伪元素

## CSS 高级

- CSS 对齐
- CSS 尺寸
- CSS 分类
- CSS 导航栏
- CSS 图片库
- CSS 图片透明
- CSS 媒介类型
- CSS 注意事项
- CSS 总结

## CSS 实例

- CSS 实例

## CSS 测验

- CSS 测验

## CSS 参考手册

- CSS 参考手册
- CSS 选择器
- CSS 听觉参考手册
- CSS 网络安全字体
- CSS 单位
- CSS 颜色
- CSS 颜色值
- CSS 颜色名
- CSS 颜色十六进制

## 建站手册

- 网站构建
- 万维网联盟 (W3C)
- 浏览器信息
- 网站品质
- 语义网
- 职业规划
- 网站主机

## 关于 W3School

## 帮助 W3School

## 广告刊例

# CSS 属性选择器详解

- CSS ID 选择器详解
- CSS 后代选择器

CSS 2 引入了属性选择器。

属性选择器可以根据元素的属性及属性值来选择元素。

## 简单属性选择

如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。

### 例子 1

如果您希望把包含标题（title）的所有元素变为红色，可以写作：

    *[title] {color:red;}

亲自试一试

### 例子 2

与上面类似，可以只对有 href 属性的锚（a 元素）应用样式：

    a[href] {color:red;}

亲自试一试

### 例子 3

还可以根据多个属性进行选择，只需将属性选择器链接在一起即可。

例如，为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色，可以这样写：

    a[href][title] {color:red;}

亲自试一试

### 例子 4

可以采用一些创造性的方法使用这个特性。

例如，可以对所有带有 alt 属性的图像应用样式，从而突出显示这些有效的图像：

    img[alt] {border: 5px solid red;}

亲自试一试

提示：上面这个特例更适合用来诊断而不是设计，即用来确定图像是否确实有效。

### 例子 5：为 XML 文档使用属性选择器

属性选择器在 XML 文档中相当有用，因为 XML 语言主张要针对元素和属性的用途指定元素名和属性名。

假设我们为描述太阳系行星设计了一个 XML 文档。如果我们想选择有 moons 属性的所有 planet 元素，使之显示为红色，以便能更关注有 moons 的行星，就可以这样写：

    planet[moons] {color:red;}

这会让以下标记片段中的第二个和第三个元素的文本显示为红色，但第一个元素的文本不是红色：

    <planet>Venus</planet>
    <planet moons="1">Earth</planet>
    <planet moons="2">Mars</planet>

查看效果

## 根据具体属性值选择

除了选择拥有某些属性的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素。

### 例子 1

例如，假设希望将指向 Web 服务器上某个指定文档的超链接变成红色，可以这样写：

    a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}

亲自试一试

### 例子 2

与简单属性选择器类似，可以把多个属性-值选择器链接在一起来选择一个文档。

    a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;}

这会把以下标记中的第一个超链接的文本变为红色，但是第二个或第三个链接不受影响：

    <a href="http://www.w3school.com.cn/" title="W3School">W3School</a>
    <a href="http://www.w3school.com.cn/css/" title="CSS">CSS</a>
    <a href="http://www.w3school.com.cn/html/" title="HTML">HTML</a>

亲自试一试

### 例子 3

同样地，XML 语言也可以利用这种方法来设置样式。

下面我们再回到行星那个例子中。假设只希望选择 moons 属性值为 1 的那些 planet 元素：

    planet[moons="1"] {color: red;}

上面的代码会把以下标记中的第二个元素变成红色，但第一个和第三个元素不受影响：

    <planet>Venus</planet>
    <planet moons="1">Earth</planet>
    <planet moons="2">Mars</planet>

查看效果

### 属性与属性值必须完全匹配

请注意，这种格式要求必须与属性值完全匹配。

如果属性值包含用空格分隔的值列表，匹配就可能出问题。

请考虑一下的标记片段：

    <p class="important warning">This paragraph is a very important warning.</p>

如果写成 p[class="important"]，那么这个规则不能匹配示例标记。

要根据具体属性值来选择该元素，必须这样写：

    p[class="important warning"] {color: red;}

亲自试一试

## 根据部分属性值选择

如果需要根据属性值中的词列表的某个词进行选择，则需要使用波浪号（~）。

假设您想选择 class 属性中包含 important 的元素，可以用下面这个选择器做到这一点：

    p[class~="important"] {color: red;}

亲自试一试

如果忽略了波浪号，则说明需要完成完全值匹配。

### 部分值属性选择器与点号类名记法的区别

该选择器等价于我们在类选择器中讨论过的点号类名记法。

也就是说，p.important 和 p[class="important"] 应用到 HTML 文档时是等价的。

那么，为什么还要有 "~=" 属性选择器呢？因为它能用于任何属性，而不只是 class。

例如，可以有一个包含大量图像的文档，其中只有一部分是图片。对此，可以使用一个基于 title 文档的部分属性选择器，只选择这些图片：

    img[title~="Figure"] {border: 1px solid gray;}

这个规则会选择 title 文本包含 "Figure" 的所有图像。没有 title 属性或者 title 属性中不包含 "Figure" 的图像都不会匹配。

亲自试一试

### 子串匹配属性选择器

下面为您介绍一个更高级的选择器模块，它是 CSS2 完成之后发布的，其中包含了更多的部分值属性选择器。按照规范的说法，应该称之为“子串匹配属性选择器”。

很多现代浏览器都支持这些选择器，包括 IE7。

下表是对这些选择器的简单总结：

类型 | 描述
--- | ---
[abc^="def"] | 选择 abc 属性值以 "def" 开头的所有元素
[abc$="def"] | 选择 abc 属性值以 "def" 结尾的所有元素
[abc*="def"] | 选择 abc 属性值中包含子串 "def" 的所有元素

可以想到，这些选择有很多用途。

举例来说，如果希望对指向 W3School 的所有链接应用样式，不必为所有这些链接指定 class，再根据这个类编写样式，而只需编写以下规则：

    a[href*="w3school.com.cn"] {color: red;}

亲自试一试

提示：任何属性都可以使用这些选择器。

## 特定属性选择类型

最后为您介绍特定属性选择器。请看下面的例子：

    *[lang|="en"] {color: red;}

上面这个规则会选择 lang 属性等于 en 或以 en- 开头的所有元素。因此，以下示例标记中的前三个元素将被选中，而不会选择后两个元素：

    <p lang="en">Hello!</p>
    <p lang="en-us">Greetings!</p>
    <p lang="en-au">G'day!</p>
    <p lang="fr">Bonjour!</p>
    <p lang="cy-en">Jrooana!</p>

亲自试一试

一般来说，[att|="val"] 可以用于任何属性及其值。

假设一个 HTML 文档中有一系列图片，其中每个图片的文件名都形如 figure-1.jpg 和 figure-2.jpg。就可以使用以下选择器匹配所有这些图像：

    img[src|="figure"] {border: 1px solid gray;}

亲自试一试

当然，这种属性选择器最常见的用途还是匹配语言值。

## CSS 选择器参考手册

选择器 | 描述
--- | ---
[attribute] | 用于选取带有指定属性的元素。
[attribute=value] | 用于选取带有指定属性和值的元素。
[attribute~=value] | 用于选取属性值中包含指定词汇的元素。
[attribute|=value] | 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value] | 匹配属性值以指定值开头的每个元素。
[attribute$=value] | 匹配属性值以指定值结尾的每个元素。
[attribute*=value] | 匹配属性值中包含指定值的每个元素。

- CSS ID 选择器详解
- CSS 后代选择器