Значок изменения в зависимости от расширения файла

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 из-за того, что HTML отображается через модуль внутри DNN. Поэтому мне нужно решение, чисто чистое 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-файлов и как в формате PDF, и значок слова для файлов DOCX. Кроме того, поскольку вы добавляете значок к элементу, вам нужно наложить 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 4

Вам нужно будет использовать некоторые Javascript/JQuery, так как нет никакого способа, чтобы идти вверх по DOM с помощью только CSS, чтобы применить класс к 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; 
}