[href$=".pdf"]可精准匹配href属性值严格以".pdf"结尾的元素，但需注意大小写敏感、url查询参数及空格会导致失配，推荐加i标志并用data-ext属性规避干扰。
匹配 href 以 .pdf 结尾的链接必须用 [href$=".pdf"]
直接写 [href$=".pdf"] 就能命中所有 href 属性值**严格以 ".pdf" 结尾**的 <a></a> 元素，比如 href="report.pdf"、href="/docs/guide.pdf"。但注意：它不解析 URL 语义，只做原始字符串比对。
常见错误包括：
- 写成
[href=".pdf"]（要求属性值**完全等于** ".pdf"，几乎不会命中） - 用
[href*=".pdf"]（子串匹配，会误中href="page.html?pdf=1"这类非 PDF 链接） - 忘记英文引号，写成
[href$=.pdf]（语法错误，整条规则被浏览器忽略）
[href$=".pdf" i] 中的 i 标志不能省略
默认大小写敏感，所以 href="doc.PDF" 或 href="manual.Pdf" 都不会被 [href$=".pdf"] 匹配。加 i 是唯一标准方案：
-
i前必须有空格：".pdf" i✅，".pdf"i❌ - 现代浏览器（Chrome 55+、Firefox 49+、Safari 10.1+、Edge、IE9+）全部支持，无需前缀
- 如果后缀本身大小写混杂（如
.XLSX），不加i就基本无法稳定生效
查询参数、hash 和空格会让 [href$=".pdf"] 失效
浏览器不做 URL 解析，只比对 DOM 中 getAttribute('href') 返回的原始字符串。这意味着：
-
href="doc.pdf?v=1"→ 结尾是"v=1"，不匹配 -
href="doc.pdf#section"→ 结尾是"#section"，不匹配 -
href="doc.pdf "（末尾有空格）→ 结尾是空格，不匹配
若链接来自 CMS、用户输入或 JS 动态生成，更稳妥的做法是：
- 用 JS 提取
new URL(el.href).pathname的后缀，存入data-ext - 改用
[data-ext$="pdf"]，彻底绕过查询参数和空格干扰
多个后缀要分开写选择器，不能合并声明
想同时给 PDF 和 ZIP 链接加图标，不能这样写：
a[href$=".pdf,.zip"] { /* 语法错误，整条规则失效 */ }
正确方式是显式列出：
a[href$=".pdf" i],
a[href$=".zip" i],
a[href$=".xlsx" i] {
padding-left: 20px;
background: url(icon-doc.svg) no-repeat left center;
}
真正容易被忽略的是：属性选择器匹配的是 HTML 中**写死的字符串**，不是运行时解析的结果。只要属性值没按预期结尾，再精准的选择器也无效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
