19.2.3 灵活运用属性选择器
如果能够灵活运用属性选择器，目前为止需要依靠id或class名才能实现的样式完全可以使用属性选择器来实现。
例如，利用[att$=val]属性选择器，可以根据超链接中不同的文件扩展符使用不同的样式。在代码清单19-3所示示例中，在超链接地址的末尾为"/"、"htm"、"html"时显示"Web网页"文字，在超链接地址的末尾为"jpg"、"jpeg"时显示"JPEG图像文件"文字。
代码清单19-3 灵活运用属性选择器示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http：//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http：//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<style type="text/css">
a[href$=\/]:after, a[href$=htm]:after, a[href$=html]:after{
content:"Web网页";
color: red;
}
a[href$=jpg]:after{
content:"JPEG图像文件";
color: green;
}
</style>
</head>
<ul>
<li><a href="http：//Lulingniu/">HTML5+CSS3权威指南</a></li>
<li><a href="http：//Lulingniu/CSS3.htm">CSS3的新特性</a></li>
<li><a href="photo.jpg">图像素材</a></li>
</ul>
这段代码的运行结果如图19-5所示。
图19-5 灵活运用属性选择器示例
另外，如果使用IE浏览器来运行本示例，因为在IE 8之前尚未支持after伪元素选择器，所以该示例只能在IE 8之后的浏览器中正确显示，在接下来的"伪元素选择器概述"一节中将针对after伪元素选择器做详细说明。
相关HTML 5与CSS 3权威指南：灵活运用属性选择器