我想知道为下载创建一个在文本之前放置一个图标并且文本和图标都是附加文件链接的一部分的类有多难。有没有一种简单的方法可以用 CSS 做到这一点?
最佳答案
假设所有下载链接都是 a
元素,属于类名“downloadLink”:
.downloadLink {
background-image: url(path/to/image.png);
background-position: 0 50%;
background-repeat: no-repeat;
}
如果这些链接的格式是:
<a href="http://example.com/downloads/document.pdf">document.pdf</a>
<a href="http://example.com/downloads/image.png">image.png</a>
然后是 css:
.downloadLink[href$=pdf] {
background-image: url(path/to/pdf_background_image.png);
background-position: 0 50%;
background-repeat: no-repeat;
}
.downloadLink[href$=png] {
background-image: url(path/to/png_background_image.png);
background-position: 0 50%;
background-repeat: no-repeat;
}
将为具有以 pdf
或 png
结尾的 href
属性的链接提供特定背景。这种方法基于 CSS3 的属性选择器,这可能会降低跨浏览器的兼容性,但根据 Quirksmode's compatibility table 不太(基本上上面的所有内容,包括 IE7 应该在 IE 或其他浏览器中支持这个(尽管它没有指定支持哪些选择器))。
引用资料:
关于html - 附件的 CSS 样式 - 自动在文本前显示图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8363050/