属性选择器

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

 

特定属性选择类型

 

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

*[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]   　　匹配属性值中包含指定值的每个元素。

 

当然专业术语是比较繁琐的，所以我给大家总结了一份通俗易懂的描述：

*<元素选择器、伪元素选择器<class、伪类选择器、属性选择器<id
属性选择器
　　= 　　完全匹配属性名，连空格都不能少
　　^= 　　是以引号中的内容开头的属性名
　　$= 　　是以引号中的内容结束的属性名
　　*= 　　是包含引号中的内容的属性名(是整体)
　　|= 　　是引号中的内容为属性名或者是以引号中的"内容-"开头的属性名
　　~= 　　引号中的内容是属性名中一个完整的名字(属性可以有若干个名字，这个内容是它其中的一个完整的名字)