[href$=".pdf" i]是唯一可靠写法，因需忽略大小写、处理首尾空格及URL参数干扰；推荐前端预处理存data-ext属性后匹配，多后缀须分条声明样式。
为什么[href$=".pdf"]经常不生效
不是选择器写错了，而是真实 href 值几乎从不“干净”地以 .pdf 结尾。常见干扰包括：href="report.PDF"（大小写不匹配）、href="doc.pdf?ver=2"（结尾是 2）、href=" manual.pdf "（首尾空格导致结尾是空格）。这些都会让 [href$=".pdf"] 完全失效。
必须加 i 标志并用英文引号
现代浏览器已全面支持大小写不敏感标志 i，但格式极其严格：
-
i前必须有空格：".pdf" i✅，".pdf"i❌ - 引号必须是英文双引号：
"，不能是中文“”或单引号' - 属性值本身不能含首尾空格——HTML 中写成
href="file.pdf"，而非href=" file.pdf "
正确写法示例：a[href$=".pdf" i]，它能同时匹配 guide.PDF、data.Pdf、doc.pdf。
带查询参数或 hash 的链接怎么办
$= 只看整个属性字符串结尾，不解析 URL 结构。所以 href="file.pdf#top" 或 href="report.pdf?ts=1" 依然无法命中——结尾分别是 #top 和 1。
立即学习“前端免费学习笔记（深入）”；
硬靠 CSS 处理不可靠，推荐前端预处理：
- 用 JS 提取
new URL(el.href).pathname，拿到纯路径部分（如/files/manual.pdf） - 把小写后缀存进
data-ext属性：el.dataset.ext = "pdf" - CSS 改用
[data-ext$="pdf"]匹配——稳定、可预测、完全绕过参数干扰
多个后缀不能偷懒合并选择器
想同时给 PDF 和 ZIP 链接加图标，不能写成：a[href$=".pdf" i], a[href$=".zip" i]::before { content: "?"; }——这样第二条规则只作用于伪元素，第一条没声明 ::before，PDF 链接不会显示图标。
必须分开写：
a[href$=".pdf" i]::before { content: "?"; }
a[href$=".zip" i]::before { content: "?"; }
如果后缀来源复杂（比如 CMS 输出不可控），data-ext + [data-ext$="xxx"] 是唯一真正可控的路径。
