根据文件扩展名更改图标

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