jquery - 根据文件扩展名更改图标

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

在 anchor 上使用 background-image 而不是 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>