卡卡網(wǎng)

CSS具有匹配的選擇器語法，可以匹配href末尾的文件擴展名。 這樣可以輕松添加與鏈接文本部分之前或之后的鏈接相關的圖標。

鏈接前或鏈接后添加一個文件圖標

匹配文件擴展名

這適用于所有現(xiàn)代瀏覽器。 它在Internet Explorer 6中不起作用，但這個變得不那么相關了。 如果瀏覽器不支持匹配的語法，那么它根本不會渲染圖像或任何相關的樣式，因此它不會破壞任何東西。

例如，要匹配所有zip文件，請將以下內容添加到CSS文件中：

a[href$='.zip'] {
  /* 這里是樣式代碼 */
}

$=使匹配位于<a>標記的href部分的末尾。

將圖像圖標添加到鏈接

只需添加必要的樣式，即添加一個與鏈接左側或右側對齊的背景圖像，然后分別在右側或左側填充足夠的填充，以使文本不會超出圖像的頂部。

doc / docx和xls / xlsx示例在鏈接中的文本右側添加圖標，在左側添加pdf和zip示例。 確保填充至少是圖像的寬度。

在下面給出的示例中，圖像為16px x 16px，因此18px的填充允許文本和圖標之間的幾個像素空間。

a[href$='.doc'], a[href$='.docx'] {
  background: transparent url(images/icon_word.gif) center right no-repeat;
  padding-right: 18px;
}
a[href$='.xls'], a[href$='.xlsx'] {
  background: transparent url(images/icon_excel.gif) center right no-repeat;
  padding-right: 18px;
}
a[href$='.pdf'] {
  background: transparent url(images/icon_pdf.gif) center left no-repeat;
  padding-left: 18px;
}
a[href$='.zip'] {
  background: transparent url(images/icon_zip.gif) center left no-repeat;
  padding-left: 18px;
}

以下是上面代碼的工作結果：

execcodegetcode

您可能對以下文章也感興趣

• CSS實現(xiàn)在外部鏈接后面添加一個出站鏈接圖標

標簽: css  鏈接