根據文件擴展名更改圖標

Question

你好我有一個問題，如果孩子包含特定的文件擴展名，是否可以更改父節點的圖標。

讓我通過一些代碼來解釋自己。我有以下設置：

<span class="file"> 
    <a href="../someurl/print.pdf" class="">Print PDF</a> 
</span> 
<span class="file"> 
    <a href="../someurl/test.pdf" class="">Test PDF</a> 
</span> 
<p> 
Should show up a word icon 
</p> 
<span class="file"> 
    <a href="../someurl/word-test.docx" class="">Word document</a> 
</span> 

用下面的CSS：

span.file{ 
    background: url('https://static.spiceworks.com/images/how_to_steps/0005/9590/8a544ad4a4ee8c8b164ff38a3f700f5a35f3805cbf7f27d8ec0bb4e455e5dab1_icpdf.gif') 0 0 no-repeat; 
    padding: 1px 0 1px 20px; 
    display: block; 
} 
span.file a[href$=".docx"] { 
    background: url('http://image.chromefans.org/fileicons/format/docx.png') 0 0 no-repeat; 
} 

是否有可能改變<span>的根據文件擴展名的背景是什麼？在下面的演示中可以看到Word圖標已生成，但不會替換當前的PDF圖標。

請記住，由於HTML是通過DNN內的模塊呈現的，因此我無法更改HTML。因此，我需要一個純粹的CSS解決方案，或者可能需要Javascript的幫助。

DEMO HERE

Answer 1

使用background-image上anchor，而不是span。 Updated Fiddle

span.file { 
 
    display: block; 
 
    padding: 1px 0px; 
 
} 
 
span.file a[href$=".docx"] { 
 
    background: url('http://image.chromefans.org/fileicons/format/docx.png') left center no-repeat; 
 
    padding-left: 20px; 
 
} 
 
span.file a[href$=".pdf"] { 
 
    background: url('https://static.spiceworks.com/images/how_to_steps/0005/9590/8a544ad4a4ee8c8b164ff38a3f700f5a35f3805cbf7f27d8ec0bb4e455e5dab1_icpdf.gif') left center no-repeat; 
 
    padding-left: 20px; 
 
}

<span class="file"> 
 
    <a href="../someurl/print.pdf" class="">Print PDF</a> 
 
</span> 
 
<span class="file"> 
 
    <a href="../someurl/test.pdf" class="">Test PDF</a> 
 
</span> 
 
<p> 
 
    Should show up a word icon 
 
</p> 
 
<span class="file"> 
 
    <a href="../someurl/word-test.docx" class="">Word document</a> 
 
</span>

Answer 2

我可能誤解了你，但這部作品在Chrome瀏覽器。只需在a而不是span上設置原始文件。

span.file a { 
 
    padding: 1px 0 1px 20px; 
 
    display: block; 
 
} 
 
span.file a[href$=".docx"] { 
 
    /* Overwrite background */ 
 
    background: url('http://image.chromefans.org/fileicons/format/docx.png') 0 0 no-repeat; 
 
} 
 

 
span.file a[href$=".pdf"] { 
 
    background: url('https://static.spiceworks.com/images/how_to_steps/0005/9590/8a544ad4a4ee8c8b164ff38a3f700f5a35f3805cbf7f27d8ec0bb4e455e5dab1_icpdf.gif') 0 0 no-repeat; 
 
} 
 

 
span.file a[href$=".xls"] { 
 
    /* Overwrite background */ 
 
    background: url('http://image.chromefans.org/fileicons/format/xls.png') 0 0 no-repeat; 
 
}

<span class="file"> 
 
    <a href="../someurl/print.pdf" class="">Print PDF</a> 
 
</span> 
 
<span class="file"> 
 
    <a href="../someurl/test.pdf" class="">Test PDF</a> 
 
</span> 
 
<p> 
 
Should show up a word icon 
 
</p> 
 
<span class="file"> 
 
    <a href="../someurl/word-test.docx" class="">Word document</a> 
 
</span> 
 
<span class="file"> 
 
    <a href="../someurl/excel-test.xls" class="">Excel document</a> 
 
</span>

Answer 3

我看到的PDF文件，既是一個PDF格式，併爲docx文件一個字圖標是顯示PDF圖標的小提琴。另外，因爲您將圖標添加到元素，您需要填充該元素而不是元素。

這似乎工作：

span.file a{ 
    padding: 1px 0 1px 20px; 
    display: block; 
} 
span.file a[href$=".docx"] { 
    background: url('http://image.chromefans.org/fileicons/format/docx.png') 0 0 no-repeat; 
} 

span.file a[href$=".pdf"] { 
    background: url('https://static.spiceworks.com/images/how_to_steps/0005/9590/8a544ad4a4ee8c8b164ff38a3f700f5a35f3805cbf7f27d8ec0bb4e455e5dab1_icpdf.gif') 0 0 no-repeat; 
} 

Answer 4

您將需要使用一些JavaScript/jQuery的，因爲沒有辦法去了只是CSS的DOM的類適用於span。下面是一個使用jQuery的一點來完成你是什麼樣的解決方案後：

http://codepen.io/mikehdesign/pen/EyZdRm

HTML

<span class="file"> 
    <a href="../someurl/print.pdf" class="">Print PDF</a> 
</span> 
<span class="file"> 
    <a href="../someurl/test.pdf" class="">Test PDF</a> 
</span> 
<p> 
Should show up a word icon 
</p> 
<span class="file"> 
    <a href="../someurl/word-test.docx">Word document</a> 
</span> 

CSS

span.file{ 
    background: url('https://static.spiceworks.com/images/how_to_steps/0005/9590/8a544ad4a4ee8c8b164ff38a3f700f5a35f3805cbf7f27d8ec0bb4e455e5dab1_icpdf.gif') 0 0 no-repeat; 
    padding: 1px 0 1px 20px; 
    display: block; 
} 

span.file.word { 
    background: url('http://image.chromefans.org/fileicons/format/docx.png') 0 0 no-repeat; 
} 

JQUERY

$("a[href$='pdf']").parent('span').addClass('pdf'); 

$("a[href$='docx']").parent('span').addClass('word'); 

正如在其他職位確定，如果你確定與應用的背景，而不是a你可以使用CSS

Answer 5

span.file a[href$=".pdf"]{ 
    background: url('https://static.spiceworks.com/images/how_to_steps/0005/9590/8a544ad4a4ee8c8b164ff38a3f700f5a35f3805cbf7f27d8ec0bb4e455e5dab1_icpdf.gif') 0 0 no-repeat; 
    padding: 1px 0 1px 20px; 
    display: block; 
} 
span.file a[href$=".docx"] { 
    background: url('http://image.chromefans.org/fileicons/format/docx.png') 0 0 no-repeat; 
    padding: 1px 0 1px 20px; 
}