用於附件的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; 
} 

將提供具體背景以鏈接與href attr ibute以pdf或png結尾。這種方法基於CSS3的屬性選擇器，這可能會降低跨瀏覽器的兼容性，但根據Quirksmode's compatibility table而不是所得到的（基本上都是以上所述，包括IE7應該支持這一點（儘管它沒有指定哪個選擇器在IE或其他瀏覽器中支持）。

參考文獻：

• attribute-ends-with $= selector。