用 [href$=".pdf"] 可精准匹配以 .pdf 结尾的链接并添加图标，无需 js 或额外 class；关键在 $= 表示属性值结尾匹配，注意大小写敏感、不支持多后缀通配，且依赖 href 属性真实包含后缀。
用 [href$=".pdf"] 匹配链接后缀并添加图标
直接靠 CSS 属性选择器的结尾匹配语法就能搞定，不需要 JS 或额外 class。关键在 $= 操作符，它表示“属性值以指定字符串结尾”。
常见错误是写成 [href=".pdf"]（完全相等）或 [href*=".pdf"]（包含即可，可能误中 report.pdf.bak 这类文件）。
-
[href$=".pdf"]精准匹配以.pdf结尾的链接，比如https://a.com/doc.pdf、/files/manual.pdf?ver=2 - 注意 URL 中带查询参数时仍能匹配，因为
$=是对整个属性值做字符串判断 - 大小写敏感：
.PDF不会命中，如需兼容，得额外写[href$=".PDF"]或改用 JS 预处理
为不同后缀设置不同图标需重复声明选择器
CSS 本身不支持正则或通配多后缀，每个后缀得单独写规则。看似啰嗦，但结构清晰、可维护性强。
例如给 PDF、DOCX、ZIP 加不同图标：
code[a[href$=".pdf"]]::after {
content: "?";
}
code[a[href$=".docx"]]::after {
content: "?";
}
code[a[href$=".zip"]]::after {
content: "?";
}
- 用
::after插入图标最稳妥，避免破坏原有 HTML 结构 - 如果页面已有内联样式或更高优先级规则，可能需要加
!important或提升选择器权重（比如加上父容器 class） - 图标用 Unicode 字符最轻量；若要用图片，改用
background-image+padding-right更可靠（content对图片支持有限）
注意路径动态生成时后缀可能被截断或混淆
某些前端框架（如 Vue Router、Next.js）或 CMS 会把真实文件路径重写成语义化路由，比如 /report 实际返回 PDF，但 DOM 中 href 值是 /report 而非 /report.pdf。
- 此时 CSS 选择器完全失效，必须由服务端或 JS 注入真实后缀（例如加
data-ext="pdf"），再用[data-ext="pdf"]匹配 - CDN 或代理层可能重写响应头
Content-Type，但不影响href属性值，所以不干扰 CSS 匹配逻辑 - 如果链接是相对路径且无后缀（如
download），而服务器靠Content-Disposition头决定文件名，那 CSS 无法感知——这类情况只能靠后端加标识
IE8 及更老浏览器不支持 $= 选择器
如果你还要兼容 IE8，这条路走不通。IE8 支持 [href] 和 [href="xxx"]，但不支持 $=、*=、^= 等现代匹配方式。
- 降级方案是给链接手动加 class，比如
<a href="a.pdf" class="file-pdf"></a>，再写.file-pdf::after - 或者用一小段脚本遍历
a[href]，用.endsWith(".pdf")判断后缀并添加 class - 现代项目基本不用考虑 IE8，但若接手遗留系统，得先确认目标环境再决定是否上
$=
href 属性值确实包含你期望的后缀字符串——有时候问题不是 CSS 写错了，而是链接本身就没带后缀。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
