学步园

简单属性选择

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

*[title] {color:red;}

例子：可以只对a标签的href属性使用应用样式：

a[href] {color:red;}

例子：同时有href和title属性的HTML超链接的文本设置为红色。

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

根据具体属性值选择

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

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

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

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

根据部分属性值选择

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

如果希望选择class属性中包含important的元素，可以用下面这个选择器做到这一点。

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

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

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

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

需要“~=”属性选择器的原因是它能用于任何属性，而不只是class。

例子：

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

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

子串匹配属性选择器

例子：如果希望指向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>