2.5　属性选择器

属性选择器是根据标签的属性来匹配元素，使用中括号进行标识。

    [属性表达式]

CSS3包括7种属性选择器形式，结合示例具体说明如下。

【示例】下面的示例设计了一个简单的图片灯箱导航，其中HTML结构代码如下。

使用CSS适当美化，具体样式代码请参考本节示例源代码，初始预览效果如图2.8所示。

图2.8　设计的灯箱广告效果图

1. E[attr]

选择具有attr属性的E元素。例如：

    .nav a[id] {background: blue; color:yellow;font-weight:bold;}

上面的代码表示：选择div.nav下所有带有id属性的a元素，并在这个元素上使用背景色为蓝色，前景色为黄色，字体加粗的样式。对照上面的HTML结构代码，不难发现，只有第一个和最后一个a元素使用了id属性，所以选中这两个a元素，效果如图2.9所示。

也可以指定多属性。

    .nav a[href][title] {background: yellow; color:green;}

上面的代码表示的是选择div.nav下的同时具有href和title两个属性的a元素，效果如图2.10所示。

图2.9　属性快速匹配

图2.10　多属性快速匹配

2. E[attr="value"]

选择具有attr属性，且属性值等于value的E元素。例如：

    .nav a[id="first"] {background: blue; color:yellow;font-weight:bold;}

上面的代码表示选中div.nav中的a元素，且这个元素有一个id="first"属性值，则预览效果如图2.11所示。

E[attr="value"]属性选择器也可以多个属性并写，进一步缩小选择范围，用法如下所示，则预览效果如图2.12所示。

    .nav a[href="#1"][title] {background: yellow; color:green;}

图2.11　属性值快速匹配

图2.12　多属性值快速匹配

3. E[attr ~ ="value"]

选择具有attr属性，且属性值为一用空格分隔的字词列表，其中一个等于value的E元素。包含只有一个值，且该值等于value的情况。例如：

    .nav a[title ~ ="website"]{background:orange;color:green;}

上面的代码表示在div.nav下的a元素的title属性中，只要其属性值中含有"website"这个词就会被选择，结果a元素中“2”“6”“7”“8”这4个a元素的title中都含有，所以被选中，如图2.13所示。

4. E[attr^="value"]

选择具有attr属性，且属性值为以value开头的字符串的E元素。例如：

    .nav a[title^="http://"]{background:orange;color:green;}
    .nav a[title^="mailto:"]{background:green;color:orange;}

上面的代码表示的是选择了以title属性，并且以"http://"和"mailto:"开头的属性值的所有a元素，匹配效果如图2.14所示。

图2.13　属性值局部词匹配

图2.14　匹配属性值开头字符串的元素

5. E[attr$="value"]

选择具有attr属性，且属性值为以value结尾的字符串的E元素。例如：

    .nav a[href$="png"]{background:orange;color:green;}

上面的代码表示选择div.nav中元素有href属性，并以"png"结尾的a元素。

6. E[attr*="value"]

选择具有attr属性，且属性值为包含value的字符串的E元素。例如：

    .nav a[title*="site"]{background:black;color:white;}

上面的代码表示选择div.nav中a元素的title属性中只要有"site"字符串就可以。上面样式的预览效果如图2.15所示。

7. E[attr|="value"]

选择具有attr属性，其值是以value开头，并用连接符（-）分隔的字符串的E元素；如果值仅为value，也将被选择。例如：

    .nav a[lang|="zh"]{background:gray;color:yellow;}

上面的代码会选中div.nav中lang属性等于zh或以zh-开头的所有a元素，如图2.16所示。

图2.15　匹配属性值中的特定子串

图2.16　匹配属性值开头字符串的元素