Question

我想知道为下载创建一个类是多么困难，在文本之前放置一个图标，文本和图标都是附加文件链接的一部分。使用CSS有一种简单的方法吗？

Answer 1

假设所有下载链接都是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;
}

将为具有以href或pdf结尾的png属性的链接指定具体背景。这种方法基于CSS3的属性选择器，这可能会降低跨浏览器的兼容性，但根据Quirksmode's compatibility table 而不是（基本上所有内容，包括IE7应该支持这一点（尽管如此）它没有指定在IE或其他浏览器中支持哪个选择器）。

参考文献：

attribute-ends-with $= selector。

附件的CSS样式 - 文本自动前的图标

1 个答案: