css 根据URL的文件类型设置图标图像

Posted 2021-05-13

.container a[href$=".pdf"],
.container a[href$=".mp3"],
.container a[href$=".doc"],
.container a[href$=".docx"],
.container a[href$=".xls"],
.container a[href$=".xlsx"],
.container a[href$=".txt"],
.container a[href$=".gz"] {
    display: inline-block;
    line-height: 48px;
    padding-left: 58px;
    background: transparent no-repeat center left;
}

.container a[href$=".pdf"] {
    background-image: url(images/file_pdf.png);
}

.container a[href$=".mp3"] {
    background-image: url(images/file_mp3.png);
}

.container a[href$=".doc"],
.container a[href$=".docx"] {
    background-image: url(images/file_doc.png);
}

.container a[href$=".xlsx"] {
    background-image: url(images/file_xls_3.png);
}

.container a[href$=".txt"],
.container a[href$=".gz"] {
    background-image: url(images/file_txt.png);
}