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

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;
}

将为以pdf或png结尾的href属性的链接提供特定的背景。这种方法是基于CSS3的属性选择器，这可能会降低跨浏览器的兼容性，但是，根据Quirksmode的兼容性表不是太多(基本上上面的所有内容，包括，IE7应该支持这个(尽管它没有指定支持哪个选择器)在IE或其他浏览器)。

引用:

• attribute-ends-with $= selector.