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

我看到的小提琴显示了pdf文件的pdf图标以及docx文件的pdf和word图标。另外，因为您要将元素添加到元素中，所以需要填充THAT而不是元素。

这似乎有效：

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 2

使用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 3

您将需要使用一些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 4

我可能误解了您，但这适用于Chrome。只需在a上设置原始.file，而不是span。

＆＃13;

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

＆＃13;

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

＆＃13;

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

根据文件扩展名更改图标

5 个答案: