[href$=".pdf" i] 是唯一可靠写法，因需忽略大小写、处理首尾空格及url参数干扰；推荐前端预处理存 data-ext 属性后匹配，多后缀须分条声明样式。
直接用 [href$=".pdf"] 就能精确匹配，但必须加 i 标志、英文引号、确保 href 属性值无首尾空格，否则几乎必然失效。
为什么 [href$=".pdf"] 常常不生效
不是语法错，而是真实链接的 href 值往往不严格以 .pdf 结尾：
-
href="report.PDF"→ 大小写不匹配，[href$=".pdf"]不命中 -
href="doc.pdf?ver=2"→ 实际属性值是"doc.pdf?ver=2"，结尾是"2"，不是".pdf" -
href=" manual.pdf "→ 首尾空格导致结尾是" "，匹配失败 -
href="file.pdf#section"→ 结尾是"#section"，同样不匹配
[href$=".pdf" i] 是唯一可靠写法
i 标志让匹配忽略大小写，现代浏览器（Chrome 120+、Firefox 115+、Safari iOS 17+）已全量支持，无需前缀：
- ✅ 匹配：
href="guide.PDF"、href="data.Pdf"、href="doc.pdf" - ❌ 仍不匹配：
href="report.pdf?ts=1"或href="file.pdf#top"—— 因为$=只看整个属性字符串结尾，不解析 URL 结构 - 引号必须是英文双引号：
"，不能用中文引号“”或单引号' -
i前必须有空格：".pdf" i对，".pdf"i错
带查询参数或 hash 的链接怎么处理
硬啃 href 字符串不可靠，建议前端预处理：
- JS 提取
new URL(el.href).pathname，拿到纯路径部分（如/files/manual.pdf） - 把后缀存到
data-ext属性：<a href="..." data-ext="pdf"></a> - 再用
[data-ext$="pdf"]匹配 —— 稳定、可预测、不受参数干扰 - 避免用
[href*=".pdf"]：会误中https://api.example.com/v2/pdf-report这类非下载链接
多个后缀要分开写，别偷懒合并
想同时支持 PDF 和 ZIP，不能写成：
a[href$=".pdf"], a[href$=".zip"]::before { content: "?"; }
这会导致只有 a[href$=".zip"] 有图标，a[href$=".pdf"] 没声明伪元素。正确写法是：
a[href$=".pdf" i]::before { content: "?"; }
a[href$=".zip" i]::before { content: "?"; }
每个后缀单独一条规则，确保样式声明完整；如果用 Unicode 图标，注意字体支持范围；若用 SVG data URL，记得加 display: inline-block 和 margin-right 避免文字贴紧。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
