用[href$='.pdf']可精准匹配pdf链接，支持所有现代浏览器及ie9+；需带点写为.pdf，$=确保结尾匹配；纯css方案通过data url嵌入svg图标并用padding-left留白，避免误匹配和协议问题。
![css如何给特定后缀的文件链接加图标_通过[href$=\'.pdf\']实现](https://img.php.cn/upload/article/000/969/633/177398445736540.jpeg?x-oss-process=image/resize,p_40)
用属性选择器匹配PDF链接
直接用 [href$='.pdf'] 就能选中所有 href 以 .pdf 结尾的 <a></a> 标签。这个语法是 CSS 标准属性选择器里的“结尾匹配”，浏览器支持很稳，Chrome/Firefox/Safari/Edge 全都行，IE9+ 也支持。
注意两点：一是必须写成 .pdf（带点），不是 pdf；二是 $= 是严格结尾匹配，report.pdf?ver=1 这种带查询参数的也能命中——因为 .pdf 确实在 href 字符串末尾前的位置结束。
给PDF链接加小图标最简方案
不用 JS、不引入字体图标，纯 CSS + 内置 data URL 就能搞定。核心是用 background-image 叠加一个 PDF 图标，再靠 padding-left 腾出空间。
/* 基础样式 */
a[href$='.pdf'] {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23e53e3e' d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L16.5 7H13z'/%3E%3C/svg%3E") no-repeat left center;
padding-left: 24px;
background-size: 16px;
}
- SVG data URL 已做 URL 编码，复制即用，不用额外托管图片
-
background-size: 16px控制图标大小，和文字对齐更稳 - 如果链接文字换行，
background-attachment: scroll（默认值）可避免图标错位
为什么不用 [href*='.pdf'] 或 [href~='.pdf']
[href*='.pdf'] 是包含匹配，会误伤 https://example.com/pdf-report.html 这类不含真实 PDF 的链接；[href~='.pdf'] 是空格分隔匹配，完全不适用——href 属性值从来不是空格分隔的单词列表。
还有人试过 [href$='pdf']（漏掉点），结果把 myappdf 也匹配进来了。所以必须写全 [href$='.pdf']，一个字符都不能少。
遇到 HTTPS 混合内容或本地文件打不开？
如果页面是 HTTPS，但 PDF 链接是 HTTP，现代浏览器会直接屏蔽图标加载（混合内容警告）。解决方案只有两个：
- 确保所有 PDF 链接协议和页面一致（推荐统一用相对路径或 // 开头的协议相对 URL）
- 本地开发时用
file://协议打开 HTML，部分浏览器（如 Chrome）会禁用 data URL 背景图——换 Firefox 测试，或起个本地 server（npx serve）
图标本身是 data URL，没跨域问题；真正卡住的，往往是链接协议不一致或本地文件协议限制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
