推荐用 data-ext 属性存小写后缀并配合 [data-ext$="pdf"] 选择器，避免 href 路径干扰；图标用 ::before + content 插入字体图标或 Unicode，需设 display 和 font-size；注意大小写敏感，JS 提取后缀时应转小写。
用 [type$=".pdf"] 匹配文件链接后缀
CSS 属性选择器本身不识别“文件类型”，只认 HTML 中写死的属性值。所以想靠它自动匹配后缀，前提是 type、href 或自定义 data-ext 这类属性里真有后缀字符串。
常见错误是直接写 a[type$="pdf"] 却没在 HTML 里设 type 属性——浏览器不会自动补上，结果一条规则都不生效。
- 推荐把后缀存进
data-ext：比如<a href="report.pdf" data-ext="pdf">报告</a> - 然后用
a[data-ext$="pdf"]精准命中，避免href里混着路径（如/docs/v1/report.pdf?ts=123）导致[href$=".pdf"]失效 -
[href$=".pdf"]能用，但要注意 URL 编码或查询参数干扰；[href*=".pdf?"]或[href*=".pdf&"]得额外覆盖
图标样式要靠 ::before + content 驱动
纯 CSS 没法“读取文件内容”或“调用 MIME 类型”，图标只能靠预设规则映射。最稳的方式是用 ::before 插入 Unicode 符号或字体图标，再配背景图。
容易踩的坑是忘了设 display: inline-block 或 font-size，导致图标不显示或大小失控。
立即学习“前端免费学习笔记（深入）”；
- 用字体图标（如 Font Awesome）时，确保
content值正确：a[data-ext="pdf"]::before { content: "\f1c1"; } - 用背景图需配
display: inline-block和固定宽高，否则background-image不渲染 - 别用
content: url(...)—— 兼容性差，且无法缩放/着色
[type] 和 [data-ext] 的性能与维护差异
[type] 是原生属性，浏览器解析快，但语义上它本该表示 MIME 类型（如 application/pdf），硬塞后缀会误导可访问性工具和爬虫。
data-ext 更干净，但得靠 JS 或模板引擎生成——如果后端吐的是原始文件名，前端就得自己截后缀并写进 data-ext，否则规则全失效。
- 静态页面？直接手写
data-ext最省事 - 动态列表？JS 提取
href后缀时注意处理大小写：filename.toLowerCase().split('.').pop() - IE8 不支持
[data-ext]，但 IE8 早该下线了；真要兼容，退回.pdf-link类名更靠谱
大小写敏感是隐形断点
所有属性选择器默认区分大小写。用户上传的 Report.PDF 或 DATA.Pdf，用 [data-ext="pdf"] 就完全匹配不上。
CSS 本身没提供 case-insensitive 修饰符（[attr="val" i] 是 Level 4 草案，Chrome 120+ 才开始支持，Safari/Firefox 还没跟上）。
- 最现实的解法：JS 统一转小写存
data-ext - 拒绝
[data-ext="PDF"], [data-ext="Pdf"], [data-ext="pdf"]这种暴力枚举——维护成本高还漏边角 case - 如果必须纯 CSS，且只支持现代浏览器，可用
[data-ext="pdf" i]，但得确认部署环境
data-ext 根本没写进去，或者写了大写却用小写匹配。盯住这层数据流，比调样式更关键。 
