《HTML 5与CSS 3 权威指南（第4版·下册）》 —16.2.3　灵活运用属性选择器

16.2.3　灵活运用属性选择器

如果能够灵活运用属性选择器，目前为止需要依靠id或class名才能实现的样式完全可以使用属性选择器来实现。

例如，利用[att$=val]属性选择器，可以根据超链接中不同的文件扩展符使用不同的样式。在代码清单16-3所示示例中，在超链接地址的末尾为“／”“htm”“html”时显示“Web网页”文字，在超链接地址的末尾为“jpg”“jpeg”时显示“JPEG图像文件”文字。

代码清单16-3　灵活运用属性选择器示例

这段代码的运行结果如图16-5所示。

另外，如果使用IE浏览器来运行本示例，因为在IE 8之前尚未支持after伪元素选择器，所以该示例只能在IE 8之后的浏览器中正确显示，在接下来的“伪元素选择器概述”一节中将针对after伪元素选择器做详细说明。