属性选择器可以给予元素的属性来匹配元素，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”的任何元素，例如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程序：

	
	
  


	

		
		2
		3
		4
		5
		6
		7
		8
		9
		
	

显示效果如下：

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]属性选择浓ky"http://www.2cto.com/kf/ware/vc/" target="_blank" class="keylink">vc8L2gyPgq9q8alxeTEx9CpyejWw8HLYXR0csr00NSjrLb4x9JhdHRyyvTQ1CYjMjA1NDA71tCw/LqsdmFs19a3+7SutcTUqsvYo6zU2snPw+ZodG1s0rPD5rT6wutDU1PR+cq91+6689T2vNPI58/CtPrC66O6CjxwcmUgY2xhc3M9"brush:java;">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;
}

显示效果如下：