2.4 属性选择器

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

    [属性表达式]

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

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

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

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

1. E[attr]

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

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

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

图2.7 属性快速匹配

也可以指定多属性：

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

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

图2.8 多属性快速匹配

2. E[attr="value"]

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

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

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

图2.9 属性值快速匹配

E[attr="value"]属性选择器也可以多个属性并写，进一步缩小选择范围，用法如下：

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

预览效果如图2.10所示。

图2.10 多属性值快速匹配

3. E[attr~="value"]

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

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

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

图2.11 属性值局部词匹配

4. E[attr^="value"]

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

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

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

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中title属性值中有site字符串的a元素。上面样式的预览效果如图2.13所示。

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

7. E[attr|="value"]

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

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

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

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

上一章目录下一章