CSS3学习案例1——超级链接类型标示图标

效果如图：

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