CSS实现按超级链接类型显示图标

效果如图：

参考代码如下

	p {
		margin: 4px;
	}
	a[href^="http:"] {
		background: urlimages/window.gif) no-repeat left center;
		padding-left: 18px;
	}
	/*匹配所有的有效超链接*/
	a[href$="pdf"] {
		background: urlimages/icon_pdf.gif) no-repeat left center;
		padding-left: 18px;
	}
	/*匹配所有的pdf文件*/
	a[href$="xls"] {
		background: urlimages/icon_xls.gif) no-repeat left center;
		padding-left: 18px;
	}
	/*匹配所有的xls文件*/
	a[href$="ppt"] {
		background: urlimages/icon_ppt.gif) no-repeat left center;
		padding-left: 18px;
	}
	/*匹配所有的ppt文件*/
	a[href$="rar"] {
		background: urlimages/icon_rar.gif) no-repeat left center;
		padding-left: 18px;
	}
	/*匹配所有的rar文件*/

<h1>超级链接类型标示图标</h1>
<p><a href="http://www.baidu.com/name.pdf">PDF文件</a></p>
<p><a href="http://www.baidu.com/name.ppt">ppt文件</a></p>
<p><a href="http://www.baidu.com/name.xls">xls文件</a></p>
<p><a href="http://www.baidu.com/name.rar">rar文件</a></p>
<p><a href="http://www.baidu.com/name.jpg">jpg文件</a></p>