2.3 属性选择器
视频讲解
CSS3在CSS2基础上新增加了3个属性选择器，如E[attr^="value"]、E[attr$="value"]和E[attr*="value"]。这7个属性选择器具体说明如下。
☑ E[attr]：只使用属性名，但没有确定任何属性值。
☑ E[attr="value"]：指定属性名，并指定了该属性的属性值。
☑ E[attr～="value"]：指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的～不能不写。
☑ E[attr^="value"]：指定属性名，并且有属性值，属性值是以value开头的。
☑ E[attr$="value"]：指定属性名，并且有属性值，属性值是以value结束的。
☑ E[attr*="value"]：指定属性名，并且有属性值，而且属值中包含了value。
☑ E[attr|="value"]：指定属性名，并且属性值是value或者以value-开头的值（如zh-cn）。
提示：在上面的语法形式中，E表示匹配元素的选择符，可以省略；中括号为属性选择器标识符，不可或缺；attr表示HTML属性名；value表示HTML属性值或者HTML属性值包含的子字符串。
目前，主流浏览器都支持属性选择器，虽然早期IE浏览器存在不兼容问题，如IE 6，但不影响属性选择器的普及和使用。
【示例】为了更好地演示CSS3属性选择器的应用，本示例将设计一个简单的图片灯箱导航示例，其中HTML结构如下。
使用CSS适当美化该结构块，具体代码如下所示，预览效果如图2.13所示。
图2.13 设计的灯箱广告效果图
下面结合这个示例，具体分析每个属性选择器的使用方法。
1. E[attr]
E[attr]属性选择器可以选择包含指定属性的元素，例如：
.nav a[id] {background: blue; color:yellow;font-weight:bold;}
上面代码表示的是，选择了div.nav下所有带有id属性的a元素，并在这个元素上使用背景色为蓝色，前景色为黄色，字体加粗的样式。对照上面的HTML结构不难发现，只有第一个和最后一个链接使用了id属性，所以选中了这两个a元素，效果如图2.14所示。
也可以指定多属性：
.nav a[href][title] {background: yellow; color:green;}
上面代码表示的是，选择div.nav下的同时具有href和title两个属性的a元素，效果如图2.15所示。
图2.14 属性快速匹配
图2.15 多属性快速匹配
2. E[attr="value"]
E[attr="value"]选择器能精确选择需要的元素，例如：
.nav a[id="first"] {background: blue; color:yellow;font-weight:bold;}
选中div.nav中的a元素，并且这个元素有一个id="first"属性值，则预览效果如图2.16所示。
E[attr="value"]属性选择器也可以多个属性并写，进一步缩小选择范围，用法如下所示，则预览效果如图2.17所示。
.nav a[href="#1"][title] {background: yellow; color:green;}
图2.16 属性值快速匹配
图2.17 多属性值快速匹配
3. E[attr～="value"]
E[attr～="value"]属性选择器匹配一个或多个词列表，如果是列表，则需要用空格隔开，只要属性值中有一个value相匹配就可以选中该元素。例如：
.nav a[title～="website"]{background:orange;color:green;}
在div.nav下的a元素的title属性中，只要其属性值中含有website这个词就会被选择，结果a元素中“2”“6”“7”“8”这4个a元素的title中都含有，所以被选中，如图2.18所示。
4. E[attr^="value"]
E[attr^="value"]属性选择器选择attr属性值以value开头的所有元素，例如：
.nav a[title^="http://"]{background:orange;color:green;}
.nav a[title^="mailto:"]{background:green;color:orange;}
上面代码表示的是选择了title属性，并且以"http://"和"mailto:"开头的属性值的所有a元素，匹配效果如图2.19所示。
图2.18 属性值局部词匹配
图2.19 匹配属性值开头字符串的元素
5. E[attr$="value"]
E[attr$="value"]表示选择attr属性值以value结尾的所有元素，例如：
.nav a[href$="png"]{background:orange;color:green;}
上面代码表示选择div.nav中元素有href属性，并以png结尾的a元素。
6. E[attr*="value"]
E[attr*="value"]属性选择器表示选择attr属性值中包含子串"value"的所有元素。例如：
.nav a[title*="site"]{background:black;color:white;}
上面代码表示选择div.nav中a元素的title属性中只要有"site"字符串的元素。上面样式的预览效果如图2.20所示。
7. E[attr|="value"]
E[attr|="value"]选择器会选择attr属性值等于value或以value-开头的所有元素，例如：
.nav a[lang|="zh"]{background:gray;color:yellow;}
上面代码会选中div.nav中lang属性等于zh或以zh-开头的所有a元素，如图2.21所示。
图2.20 匹配属性值中的特定子串
图2.21 匹配属性值开头字符串的元素