匹配PDF链接需用[href$=".pdf" i]（i标志区分大小写且须小写空格分隔），但无法处理查询参数、hash或末尾空格；推荐用data-ext预处理路径后缀再匹配。
用 [href$=".pdf"] 匹配以 .pdf 结尾的链接，但必须加 i 标志才可靠
浏览器默认区分大小写，[href$=".pdf"] 只能匹配小写的 .pdf，而真实页面中常出现 .PDF、.Pdf 甚至 .pDf。不加 i 标志，这些全会漏掉。
-
i必须紧跟在引号后、且前面留一个空格：[href$=".pdf" i]✅ - 写成
[href$=".pdf"i]（没空格）或[href$=".pdf" I]（大写 I）都无效 ❌ -
i在 Chrome、Firefox、Safari、Edge 和 IE9+ 全支持，无需前缀
查询参数和 hash 会让 [href$=".pdf"] 失效，别指望它“智能解析文件名”
CSS 属性选择器做的是原始字符串比对，不是文件系统解析。只要 href 值结尾不是 .pdf，就完全不匹配：
-
href="report.pdf?v=1"→ 不匹配（结尾是v=1） -
href="doc.pdf#section"→ 不匹配（结尾是#section） -
href="file.pdf "（末尾有空格）→ 不匹配
如果链接来自 CMS、用户输入或 JS 动态生成，更建议前端预处理：用 new URL(el.href).pathname 提取路径，再把后缀存进 data-ext，最后用 [data-ext$="pdf"] 匹配——这才是真正绕过干扰的方案。
给多个后缀加样式时，别合并选择器写法
想同时为 PDF 和 ZIP 链接加图标，不能这样写：
立即学习“前端免费学习笔记（深入）”；
a[href$=".pdf"], a[href$=".zip"]::before { content: "?"; }因为第二条规则只作用于 ::before，第一条没伪元素声明，PDF 链接不会显示图标。
正确做法是分别写：
a[href$=".pdf" i]::before,<br>a[href$=".zip" i]::before { content: "?"; }或者更稳妥地，统一用 background-image + padding-left，避免伪元素渲染异常。
::after 加图标时，display 和 vertical-align 是关键
::after 默认是 inline 元素，文字换行、缩放、字体差异都会导致图标错位：
- 必须设
display: inline-block或inline-flex，否则vertical-align无效 - 推荐显式设置
line-height和vertical-align: middle - 如果用
background-image，记得加background-repeat: no-repeat和background-position: left center
最易被忽略的是：属性值本身带前后空格（如 href=" file.pdf "），哪怕加了 i 也救不了——这种得靠服务端清洗或 JS 修正。
