必须用[href$=".pdf" i]，因浏览器默认大小写敏感且$=只匹配属性值严格结尾，加i标志才能覆盖.pdf、.pdf?等真实场景，现代浏览器全量支持。
匹配 href 以 .pdf 结尾的链接必须用 [href$=".pdf"]
直接写 [href$=".pdf"] 就能命中所有 href 属性值**严格以 ".pdf" 结尾**的 <a></a> 元素，比如 href="report.pdf"、href="/docs/guide.pdf?ver=1"（现代浏览器会忽略查询参数后的部分，实际匹配成功）。但 href="file.PDF" 默认不匹配——大小写敏感是默认行为。
常见错误包括：
• 写成 [href=".pdf"]（完全相等，只匹配 href 值恰好等于 ".pdf" 的极少数情况）
• 用 [href*=".pdf"]（子串匹配，会误中 href="not-a-pdf.html?pdf=1" 这类非 PDF 链接）
• 忘记英文引号，写成 [href$=.pdf]（语法错误，规则无效）
[href$=".pdf" i] 中的 i 标志不能省略
加 i 是让匹配忽略大小写，否则 .PDF、.Pdf、.pDf 全部失效。但要注意：
• i 前必须有空格，" .pdf" i 错，".pdf" i 对
• i 在所有现代浏览器（含 Chrome、Firefox、Safari、Edge）和 IE9+ 都支持，无需前缀
• 如果后缀本身带大小写混合（如 .XLSX），不加 i 就几乎无法稳定匹配
查询参数和 hash 会影响匹配结果
浏览器对 href 属性值的解析是原始字符串比对，不是文件扩展名解析。这意味着：
• href="doc.pdf?v=1" → 匹配失败（结尾是 "v=1"）
• href="doc.pdf#section" → 匹配失败（结尾是 "#section"）
• href="doc.pdf "（末尾有空格）→ 匹配失败（结尾是空格）
如果链接来源不可控（比如 CMS 输出或用户生成内容），更稳妥的做法是：
• 前端 JS 提取 new URL(el.href).pathname 的后缀，存入 data-ext
• 用 [data-ext$="pdf"] 替代 [href$=".pdf"]
• 这样能绕过查询参数、hash 和空格干扰
多个后缀要分开写选择器，不能合并声明
想同时给 PDF 和 ZIP 链接加图标，不能这样写：a[href$=".pdf"], a[href$=".zip"]::before { content: "?"; }
因为第二条规则只作用于 ::before，第一条没伪元素声明，PDF 链接不会显示图标。
正确写法是分别声明：a[href$=".pdf" i]::before { content: "?"; }a[href$=".zip" i]::before { content: "?"; }
或者统一用同一图标：
a[href$=".pdf" i]::before,<br>a[href$=".zip" i]::before { content: "?"; }
注意：
• 每个 [href$="..."] 都得单独加 i（[href$=".pdf" i], [href$=".zip" i]）
• 不支持 [href$=".pdf|.zip"] 这类正则写法，CSS 原生不支持
$= 完全失效，而开发者往往只盯着文件名看。调试时用 console.log(el.getAttribute('href')) 看真实值，比反复改 CSS 更有效。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
