效果如圖：

參考代碼如下

	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 >PDF文件</a></p>
<p><a >ppt文件</a></p>
<p><a >xls文件</a></p>
<p><a >rar文件</a></p>
<p><a >jpg文件</a></p>

總結

以上是生活随笔為你收集整理的CSS实现按超级链接类型显示图标的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。