[href$=".pdf" i]是唯一纯css解法，因默认大小写敏感且需严格以".pdf"结尾，而真实href常含大小写差异、查询参数、锚点或首尾空格；i标志必须小写、前带空格、用英文引号，多后缀须分条书写。
为什么[href$=".pdf"]经常不生效
不是语法错，而是真实 href 值几乎从不“干净”：它可能带大小写差异、查询参数、锚点或首尾空格。[href$=".pdf"] 要求整个属性字符串**严格以 ".pdf" 结尾**，所以这些情况全会失败：
-
href="report.PDF"→ 大小写不匹配 -
href="doc.pdf?ver=2"→ 实际结尾是 "2" -
href=" file.pdf "→ 结尾是空格 -
href="file.pdf#top"→ 结尾是 "#top"
现代浏览器（Chrome 120+、Firefox 115+、Safari iOS 17+）已全量支持 i 标志，它是唯一纯 CSS 解法。
必须用[href$=".pdf" i]，且引号和空格不能错
[href$=".pdf" i] 是当前最可靠写法，但细节决定成败：
- 引号必须是英文双引号：
"，不能是中文“”或单引号' -
i前必须有空格：".pdf" i✅，".pdf"i❌ -
i必须小写："i"有效，"I"无效 - 点号不能省：
[href$="pdf"]会误中myappdf这类字符串
加了 i 后，guide.PDF、data.Pdf、doc.pdf 全部命中——但依然不处理 ?ver=2 或 #top，因为 $= 只做字符串末尾比对，不解析 URL 结构。
多后缀必须分条写，不能用逗号合并样式
CSS 不支持通配多后缀，比如想同时匹配 .pdf 和 .zip，不能写成：
a[href$=".pdf" i], a[href$=".zip" i] { content: "?"; }
这样写语义清晰、可维护性强，也避免优先级混乱：
a[href$=".pdf" i]::after { content: "?"; }a[href$=".zip" i]::after { content: "?"; }a[href$=".svg" i]::after { content: "?️"; }
如果链接里已有 display: block 或 flex，::after 可能换行，建议在父 a 上加 white-space: nowrap。
真正影响匹配的是 DOM 中的 href 字符串值
属性选择器只看最终渲染进 DOM 的 href 属性值，不是你写的 HTML 源码，也不是浏览器解析后的 URL。这意味着：
- JS 动态改过
href，CSS 选择器不会重新触发（除非重载样式） - 服务端做了 URL 重写（如 Nginx rewrite），DOM 中的
href可能已变 - HTML 里写了
href=" file.pdf "，那 DOM 中的值就是带空格的字符串，i也救不了
调试时最直接的办法是打开控制台，执行 document.querySelector('a').getAttribute('href')，复制返回值，再按实际字符串写选择器——这是最容易被跳过的一步。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
