2.11 属性选择器
在HTML中，通过各种各样的属性可以给元素增加很多附加的信息。例如，通过id属性可以将不同DIV元素进行区分。CSS2中引入了一些属性选择器，这些选择器可基于元素的属性来匹配元素，而CSS3在CSS2的基础上扩展了这些属性选择器，支持基于模式匹配来定位元素。
2.11.1 属性选择器语法
CSS3在CSS2的基础上新增了3个属性选择器，可以帮助大家对标签进行过滤，也能非常容易帮助大家在众多标签中定位自己需要的HTML标签，下面通过表2-18详细介绍CSS3的属性选择器的使用。
表2-18 CSS3属性选择器列表
选择器 功能描述
选择器 功能描述
E[attr] 选择匹配具有属性attr的E元素。其中E可以省略，表示选择定义了attr属性的任意类型元素
E[attr=val] 选择匹配具有属性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”的任何元素，例如<a class=”info” title=”click here for more information”>click me</a>
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]相反
CSS3遵循了惯用的编码规则，通配符的使用提高了样式表的书写效率，也使CSS3的属性选择器更符合编码习惯。CSS3中常见的通配符如表2-19所示。
表2-19 CSS3中常见的通配符
通配符 功能描述 示例
^ 匹配起始符 span[class^=span]
表示选择以类名以“span”开头的所有span元素
$ 匹配终止符 a[href$=pdf]
表示选择以”pdf”结尾的href属性的所有a元素
* 匹配任意字符 a[title*=site]
匹配a元素，而且a元素的title属性值中任意位置有“site”字符的任何字符串
2.11.2 浏览器兼容性
属性选择器在浏览器兼容性方面表现还是可以的，如表2-20所示。
表2-20 属性选择器的浏览器兼容性
选择器
E[attr] 7 +√ √ √ √ √
E[attr=val] 7 +√ √ √ √ √
E[attr|=val] 7 +√ √ √ √ √
E[attr~=val] 7 +√ √ √ √ √
E[attr*=val] 7 +√ √ √ √ √
E[attr^=val] 7 +√ √ √ √ √
E[attr$=val] 7 +√ √ √ √ √
2.11.3 属性选择器的使用方法详解
前面了解了CSS3属性选择器的使用规则以及浏览器兼容性，接下来通过一些简单的示例来体验一下CSS3属性选择器的强大功能。
先创建一个简单的HTML结构，并付上一些默认样式。
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>CSS3属性选择器的使用</title>
<style type="text/css">
.demo {
width: 300px;
border: 1px solid #ccc;
padding: 10px;
overflow: hidden;
margin: 20px auto;
}
.demo a {
float: left;
display: block;
height: 50px;
width: 50px;
border-radius: 10px;
text-align: center;
background: #aac;
color: blue;
font: bold 20px/50px Arial;
margin-right: 5px;
text-decoration: none;
margin: 5px;
}
</style>
</head>
<body>
<div class="demo">
<a href="http://www.w3cplus.com" target="_blank"
class="links item first" id="first" title="w3cplus">1</a>
<a href="" class="links active item" title="test
website" target="_blank" lang="zh">2</a>
<a href="sites/file/test.html" class="links item"
title="this is a link" lang="zh-cn">3</a>
<a href="sites/file/test.png" class="links item"
target="_balnk" lang="zh-tw">4</a>
<a href="sites/file/image.jpg" class="links item"
title="zh-cn">5</a>
<a href="mailto:w3cplus@hotmail" class="links item"
title="website link" lang="zh">6</a>
<a href="/a.pdf" class="links item"
title="open the website" lang="cn">7</a>
<a href="/abc.pdf" class="links item"
title="close the website" lang="en-zh">8</a>
<a href="abcdef.doc" class="links item"
title="http://www.sina.com">9</a>
<a href="abd.doc" class="linksitem last" id="last">10</a>
</div>
</body>
</html>
基本样式的效果如图2-53所示。
接下来使用CSS3属性选择器进行个性化修改。
1．E[attr]属性选择器
这个属性选择器是最简单的一种。用来选择有某个属性的元素，而不论这个属性值是什么。例如，选择所有带有ID属性的a元素，并且改变了匹配元素的背景色，如下所示。
a[id]{background-color:yellow;}
对照上面的HTML结构不难发现，只有第一个和最后一个链接元素a使用了ID属性，所以上面的代码选择了两个a元素，效果如图2-54所示。
图2-54 E[attr]属性选择器的效果
也可以使用多属性进行选择元素。例如：
a[id][title]{background-color: red;}
上面代码表示元素a只要同时定义了id和title属性，都将匹配，其背景将变成红色，效果如图2-55所示。
2．E[attr=val]属性选择器
E[attr=val]是指元素E设置了属性attr，并且其属性值为“val”，而E[attr]属性选择器只选择了属性为attr的元素E，并没有明确的设置attr的属性值，这也是这两种选择器的最大区别之处。在众多元素之中缩小选择范围，能进一步精确选择自己需要的元素。在前面的实例基础上进行一下简单的修改。
图2-55 E[attr1][attr2]多属性选择器使用效果
a[id=first]{background-color:red;}
此处在id属性的基础上指定了相应的val值为first，选中所有a元素中设置“id=first”的链接，并将其背景色设置为red，效果如图2-56所示。
图2-56 E[attr=val]属性选择器的使用效果
注
意 E[attr=val]选择器中，属性和属性值必须完全匹配，特别对于属性值是词列表的形式，例如，
<a href="#" class="links item"></a>
其中a[class="links"]{...}是找不到匹配元素，只有a[class="links item"]{...}才匹配。
3．E[attr|=val]属性选择器
首先提醒大家，attr后面的是一条竖线，而不是字母。E[attr|=val]为特定属性选择器，选择attr属性值等于“val”，或以“val-”开头的所有字符串属性的元素，一起来看看这个属性选择器的使用。
a[lang|=zh]{background-color: yellow;}
上面的代码会选中所有设置了lang属性，并且其属性值是以“zh”或“zh-”开头的所有a链接元素，其效果如图2-57所示。
图2-57 E[attr|=val]选择器的使用效果
例如Web页面中有很多图片，图片文件名都以“figure-1”、“figure-2”的方式来命名，使用E[attr|=val]选择器来选择这些图片就很方便了。
4．E[attr?～=val]属性选择器
如果想根据元素属性值中的词列表的某个词来匹配需要的元素，就可以使用这个属性选择器。这种属性选择器匹配的元素某个属性具有一个或多个属性值，多个属性值之间使用空格隔开，当元素属性值中有一个属性值与选择器的val相匹配，就可以选中该元素。而前面介绍的E[attr=val]属性选择器是属性值要完全匹配才会被选中，它们两者区别就是“~”符号。一起来看一个简单的示例。
a[title~=website]{background-color:yellow;}
效果如图2-58所示。
图2-58很清楚地告诉我们，只要a链接元素设置有title属性，并且这个title属性的值包含了website属性值，都将匹配。如果不小心将“~”省略，结果将找不到匹配的元素。
5．E[attr*=val]属性选择器
这个属性选择器使用了通配符，将匹配元素设置了attr属性，而且attr属性值中包含“val”字符串。也就是说，只要所选择的属性中有val字符串，都将被匹配。例如：
图2-58 E[attr~=val]选择器的使用效果
a[class*=links]{background-color:yellow;}
这个示例将选中所有的a元素，因为示例中的a元素“class”的属性值都含有字符串“links”，不管是“links”还是“linksitem”，其效果如图2-59所示。
图2-59 E[attr*=val]属性选择器的使用效果
E[attr*=val]与E[attr~=val]很容易混淆，它们的区别是：E[attr*=val]匹配的是元素属性值中只要包含“val”字符串就可以，而E[attr~=val]匹配的是元素属性值中要包含“val”，并不仅是字符串。例如，a[title~=links]属性值中的links是一个单词，而a[title*=links]中的links不一定是一个单词，就如上面的示例中，可以是“linksitem”。换句话来说，“<a title='linksitem'></a>”元素只有a[title*=links]匹配，但是“<a title='links item'></a>”元素，a[title~=links]和a[title*=links]都匹配。
6．E[attr^=val]属性选择器
指选择attr属性值以“val”开头的所有元素。换句话说，选择的属性，其对应的属性值是以“val”开始的，一起来看一个简单的示例。
a[href^=http]{background-color:yellow;}
这个选择器表示选择href属性，以“http”开头的所有a元素，即只要a元素中的href属性值是以“http”开头的元素都会选中，如图2-60所示。
图2-60 E[attr^=val]属性选择器的使用效果
前面有一个属性选择器E[attr|=val]匹配的是以“val”或者“val-”开头的元素，而E[attr^=val]匹配的是以“val”开头的元素，这两个选择器有时使用的效果非常相似，仅仅区别在于E[attr|val]还匹配以“val-”开头的元素，其中“-”是不可或缺的。
7．E[attr$=val]属性选择器
这个属性选择器刚好与E[attr^=val]相反，表示选择attr属性值以“val”结尾的所有元素。运用在一些特殊的链接加背景图很方便，例如给PDF、PNG、DOC等不同文件加上不同的ICON图标就可以使用这个属性。下面通过给“png”值结尾的a元素改变背景色。
a[href$=png]{background-color:yellow;}
运用上面代码的效果如图2-61所示。
通过一些简单的示例，向大家详细介绍了CSS3属性选择器的使用方法，以及效果，接下来通过实战来学习CSS3属性选择器在Web中是如何发挥作用。
图2-61 E[attr$=val]属性选择器的使用效果
2.11.4 实战体验：创建个性化链接样式
对于Web设计人员来说碰到的链接有很多种，例如文字、图片等。
例如新浪爱问共享资料库，下载文档列表的链接前面会显示一个文档类型图标（如图2-62所示），这样的设计给用户带来一种超好的体验。另外，有些Web网站对于本地链接和外部链接也会使用不同的图标来区分（如图2-63所示）。CSS3的属性选择器此时就显得特别的有用，通过它们可以很容易实现这些效果。
图2-62 显示类型图标的文档下载链接 图2-63 Web页面的外部链接
本节示例的效果如图2-64所示，当然此效果只是部分CSS3属性选择器的运用。
图2-62和图2-63的链接效果，使用属性选择器匹配a元素中的href属性值。如果a元素的href属性值是以“http://”开头，将这些链接划分到外部链接一类中，给其定义一个样式，对于下载文档的类型可以根据其文件的扩展名来设置不同的图标。例如，链接为Word文件时，后面显示Word文档图标；链接为PDF文件时，后面显示PDF文档图标。
根据这一思路，可以编写一个简化的示例代码，如下所示。
图2-64 创建个性化链接
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>创建个性化链接样式</title>
<style type="text/css">
a {
font-size: 16px;
text-decoration: none;
padding-right: 20px;
display: inline-block;
margin-bottom: 5px;
background: url(a.png) no-repeat 100% -327px;
}
/*匹配所有外部链接*/
a[href^="http://"]{
background-position: 100% -409px;
}
/*匹配首页*/
a[href="home"]{
background-position: 100% -382px;
}
/*匹配.doc文档*/
a[href$="doc"]{
background-position: 100% 0;
}
/*匹配.ppt文档*/
a[href$="ppt"]{
background-position:100% -50px;
}
/*匹配.xls文档*/
a[href$="xls"]{
background-position:100% -75px;
}
/*匹配.html文档*/
a[href$="html"]{
background-position:100% -100px;
}
/*匹配.pdf文档*/
a[href$="pdf"]{
background-position:100% -125px;
}
/*匹配.jpg,.gif,.png图片*/
a[href$="jpg"],
a[href$="gif"],
a[href$="png"]{
background-position:100% -172px;
}
/*匹配.swf文档*/
a[href$="swf"]{
background-position:100% -193px;
}
/*匹配.zip,.rar压缩文档*/
a[href$="zip"],
a[href$="rar"]{
background-position:100% -217px;
}
/*匹配.mp3文档*/
a[href$="mp3"]{
background-position:100% -245px;
}
/*匹配.exe安装文件*/
a[href$="exe"]{
background-position:100% -273px;
}
/*匹配.txt文本文档*/
a[href$="txt"]{
background-position:100% -298px;
}
/*匹配邮箱地址*/
a[href^="mailto"]{
background-position:100% -350px;
}
</style>
</head>
<body>
<ul>
<li><a href="http://www.w3cplus.com">w3cplus.com</a></li>
<li><a href="home">home</a></li>
<li><a href="a.doc">Word文档</a></li>
<li><a href="b.ppt">Powerpoint文档</a></li>
<li><a href="c.xls">Excel文档</a></li>
<li><a href="d.html">HTML文档</a></li>
<li><a href="e.pdf">PDF文档</a></li>
<li><a href="f.jpg">JPG图片文档</a></li>
<li><a href="f.gif">GIF图片文档</a></li>
<li><a href="f.png">PNG图片文档</a></li>
<li><a href="g.swf">Flash文档</a></li>
<li><a href="h.zip">ZIP压缩文档</a></li>
<li><a href="h.rar">RAR压缩文档</a></li>
<li><a href="j.mp3">MP3文档</a></li>
<li><a href="h.exe">EXE安装文件</a></li>
<li><a href="a.txt">TXT文本文档</a></li>
<li><a href="mailto:w3cplus@hotmial.com">w3cplus@hotmail.com</a></li>
<li><a href="#">本地链接</a></li>
</ul>
</body>
</html>
由于IE 6浏览器不被支持CSS3属性选择器，为了实现图2-64效果，早期的Web设计师们会借助于JavaScript脚本，或者通过古老的办法给不同文档类型元素添加不同的类名，例如给外部链接添加类名“external”，给Word文档添加类名“word”。
注
意 随着IE 6逐渐接近死亡，可以大胆使用CSS3属性选择器来制作，或者你是一个完美的追求者，可以考虑优雅降级方案来处理。
