PDF、ZIP、DOC连接的标明(CSS技能)

原文：http://www.maratz.com/blog/archives/2005/01/13/pdf-links-labeling/
汉语翻译：http://www.176so.com/past/2007/3/17/pdf_links_labeling/
css技能之PDF、ZIP、DOC连接的标明
有时大家期待能确立的用小标志来标出大家的超连接的种类。是1个zip文本文档還是1个pdf文档。这样浏览者就了解他所关键点击的这个连接是免费下载而并不是开启另外一个网页页面了。假如全部的人都应用IE7或FF的话。大家彻底可使用[att$=val]特性挑选器，找寻以特殊值（例如.zip和.doc）末尾的特性。
a[href$=".pdf"] { padding-right: 19px; background: url(pdf.gif) no-repeat 100% .5em; }
a[href$=".zip"] { padding-right: 17px; background: url(zip.gif) no-repeat 100% .5em; }
悲剧的是IE6下列访问器不适用特性挑选器。好在，能够根据在每一个元素中加上类，应用JavaScript和DOM完成类似的实际效果。
下面得出了1个处理方法:
function fileLinks() {
var fileLink;
if (document.getElementsByTagName('a')) {
for (var i = 0; (fileLink = document.getElementsByTagName('a')[i]); i ) {
if (fileLink.href.indexOf('.pdf') != ⑴) {
fileLink.setAttribute('target', '_blank');
fileLink.className = 'pdfLink';
}
if (fileLink.href.indexOf('.doc') != ⑴) {
fileLink.setAttribute('target', '_blank');
fileLink.className = 'docLink';
}
if (fileLink.href.indexOf('.zip') != ⑴) {
fileLink.setAttribute('target', '_blank');
fileLink.className = 'zipLink';
}
}
}
}
window.onload = function() {
fileLinks();
}
自然，你必须在你的css文档中，提升这几个css类：
.pdfLink { padding-right: 19px; background: url(pdf.gif) no-repeat 100% .5em; }
.docLink { padding-right: 19px; background: url(doc.gif) no-repeat 100% .5em; }
.zipLink { padding-right: 17px; background: url(zip.gif) no-repeat 100% .5em; }
最终1点提议，你的小标志不必太过醒目，这会分散化访问者的留意力。