核心提示：属性选择器可以给予元素的属性来匹配元素，CSS3还支持基于模式匹配来定位元素，属性选择器语法如下：选择器功能描述E[attr]选择匹配具有属性attr的E元素。其中E可以省略，表示选择定义了attr属...
属性选择器可以给予元素的属性来匹配元素，CSS3还支持基于模式匹配来定位元素，属性选择器语法如下：
| 选择器 | 功能描述 |
|---|---|
| E[attr] | 选择匹配具有属性attr的E元素。其中E可以省略，表示选择定义了attr属性的任意类型元素 |
| E[attr=value] | 选择匹配具有属性attr的E元素，并且attr的属性值为val（其中val区分大小写），同样E元素省略的时表示选择定义了attr属性值为val的任意类型元素 |
| E[attr|=val] | 选择匹配E元素，且E元素定义了属性attr，attr属性值是一个具有val或者以val-开始的属性值。常用于lang属性（例如lang=“en-US”）。例如p[lang=en]将匹配定义为英语的任何段落，无论是英式英语还是美式英语 |
| E[attr~=val] | 将匹配E元素，且E元素定义了属性值attr，attr属性值具有多个空格分隔的值，其中一个值等于val。例如，.info[title~=more]将匹配元素具有类名info，且这个元素设置了一个属性title，同时title属性值是包含了“more”的任何元素，例如vcm1hdGlvbg==">click me |
| E[attr*=val] | 将匹配元素E，且元素E定义了属性attr，其属性值任意位置包含了val，换句话说字符串val与属性值中的任意位置相匹配 |
| E[attr^=val] | 将匹配元素E，且E元素定义了属性attr，其属性值以val开头的任何字符串 |
| E[attr$=val] | 选择匹配元素E，且E元素定义了属性attr，其属性值以val结尾的任何字符串，刚好与E[attr^=val]相反 |
浏览器兼容性：IE7+，还有所有版本的FF，Chrome，Safari，Opera都支持属性选择器。
下面使用实例来演示属性选择器的使用，首先编写入下一个简单的HTML程序：
CSS3属性选择器的使用
显示效果如下：
E[attr]属性选择器
选择所有带有id属性的a元素，并且改变匹配元素的背景颜色，在上面HTML代码CSS样式部分的最后增加如下代码：
a[id] {
background-color:yellow;
}显示效果如下：
E[attr=val]属性选择器
指元素E设置了属性attr，并且其属性值为val，在上述html代码CSS样式的末尾增加如下代码：
a[id=first] {
background-color: red;
}
显示效果如下：
E[attr"=val]属性选择器
选择attr属性值等于val或以val-开头的所有字符串属性的元素，在上面HTML的CSS样式后面增加如下代码：
a[lang|=zh] {
background-color: yellow;
}显示效果如下：
E[attr~=val]属性选择器
根据元素值中的此列表的某个词来匹配需要的元素，就可以使用这个选择器。在上面HTML页面CSS样式最后增加下面代码：a[title~=website] {
background-color: green;
}
显示效果如下：
E[attr*=val]属性选择器
将匹配那些设置了attr属性，而且attr属性值中包含val字符串的元素，在上面html页面代码CSS样式最后增加如下代码：a[class*=links] {
background-color: pink;
}显示效果如下：
E[attr^=val]属性选择器
选中attr属性以val开头的所有元素，在上述HTML页面的CSS样式最后增加如下代码：a[href^=http] {
background-color: crimson;
}显示效果如下：
E[attr$=val]属性选择器
选择属性以val结尾的所有元素，在上面html代码最后增加如下代码：a[href$=png] {
background-color: cyan;
}显示效果如下：
