CSS3在CSS2的基础上新增加了3个属性选择器，如：E[attr^="value"]、E[attr$="value"]、E[attr*="value"]。与已定义的四个属性选择器为一体。
选择器之属性选择器
一.基础概念：
css属性选择器，顾名思义，是根据元素属性及属性值来选择元素的。 举一个简单的例子： 例1：
1 |
|
应注意，设置的识别属性值必须与要匹配的属性值相同，否则无效。如将例1中style标签内，id值设为blue,其结果为：
二.属性过滤器
注释：E表示匹配元素的选择符，可以省略；中括号为属性选择器标识符，不能省略；attr表示HTML属性名；value表示HTML属性值，或者HTML属性值包含的子字符串。
- E[attr]: 只使用了属性名(如例1中title就没有属性值)，但是没有任何确定的属性值。
- E[attr="value"]: 指定了属性名，并指定了该属性的属性值。(如例1中的id属性)
- E[attr~="value"]:
指定了属性名，并且具有属性值，此属性值为一个词列表，且以空格隔开，其中词列表已包含一个
value词，~一定不能漏。 如以下代码：效果图：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>E[attr~="value"]选择器</title>
<style type="text/css">
li[class~="css"]{color:blue;} /*只要在属性值列表（属性值列表是用空格分隔的）中有value值即可匹配此元素*/
</style>
</head>
<body>
<ul>
<li class="html">html</li>
<li class="div css">DIV+CSS</li>
<li class="js fenge css">Javascript</li>
<li class="css-zhuanqu">Jquery</li>
</ul>
</body>
</html>
- E[attr^="value"]:
指定了属性名，且有对应属性值，属性值必须以
value开头。 - E[attr$="value"]:
指定了属性名，且有对应属性值，属性值必须以
value结尾。 - E[attr|="value"]:
指定了属性名，且对应属性值是
value或以value-开头的属性值
三.一个实例
下面是书本中的一个不错的示例，结构块部分：
1 |
|
下面我们将对刚才的的属性选择器在其中的应用一一列出：
- E[attr]:
E[attr]属性选择器是CSS3属性选择器最简单的一种。选择某个属性且不论其属性值的话，就可以使用该选择器。如：
.nav a[id] {background: blue; color: yellow; font-weight: bold;}。该代码会选择div.nav下所有带有id属性的a元素，并设置背景色为蓝色，前景色为黄色，字体加粗的样式。如果将其插入上例代码中，a标签下带属性id的只有1号和10号。效果预览图：
可以看到标号为1和10的按钮变为了背景为蓝色，颜色为黄色，这是单属性的使用。
也可以多个属性一起设置：
.nav a[href][title] {background: yellow; color: green;}
该代码会设置div.nav下的所有带href和title属性的a标签背景色为黄色，前景色为绿色。效果预览图：
可以看到除了4号和10号，其余都应用了样式。
- E[attr="value"]:
与E[attr]类似，只不过是因为指定了属性值所以会缩小了选择范围。
如：
.nav a[id="first"] {background: blue; color: yellow; font-weight: bold}。代码中只有1号和10号a标签带有id属性，前者为"first", 后者为"last"，所以结果应当为1号设置为了背景色为蓝色，前景色为黄色。效果预览图：
当然也可以多属性并排写，更加精确地选择：
.nav a[href="#1"][title] {background: yellow; color: green;}。效果预览图：
注意：使用该选择器时一定要注意，属性值应与要设置的属性值匹配，不匹配则无法应用样式。
- E[attr~="value"]:
该选择器与上一个类似，只不过又"缩小"了范围：上一个选择器要求属性值完全相同才能应用样式，而该选择器只要标签内含有该属性(即内容不完全相同)就可以应用该样式。如果:
.nav a[title="website"] {background: blue; color: yellow;}，即使用了上一个选择器，结果是不会有任何应用的：
但是如果：.nav a[title~="website"] {background: blue; color: yellow;}，就增大了选择范围，只要title属性值里含有website这个词就可以应用：
- E[attr^="value"]:
这个可以理解为上一个选择器对结果进行了筛选，只有属性值开头为"value"值的标签才会应用样式。如：
.nav a[lang^="zh"] {background: blue; color: yellow;}，该代码会让a标签内lang属性值开头为zh的应用样式：
- E[attr\(="value"]: 这个不多说了，与上面相同，只不过是匹配属性值结尾为"value"的标签。如：`.nav a[lang\)="zh"] {background: blue; color: yellow;}`。
- E[attr*="value"]:
该选择器会选择指定属性值含有"value"子串的标签。如：
.nav a[title*="site"] {background: blue; color: yellow;}。只要title属性里含有site这个字符串，就会应用样式：
- E[attr|="value"]:
该属性选择器被称为特定属性选择器，它会选择attr属性值等于
value或以value-开头(注意是有一个-的)的标签。如：.nav a[lang|="zh"]{background: blue; color: yellow;}。
小结：
在这七种选择器中，最实用的是E[attr="value"]和E[attr*="value"]。前者能定位许多不同类型的元素，特别是表单的操作，如：input[type="text"]、input[type="checkbox"]等，后者则能在网站中帮助匹配不同类型的文件，提高用户体验感(比如给.jpg,
.gif等文件配上不同的图标)。
v1.5.2