用[href$=".pdf" i]可精准匹配pdf链接，但需注意大小写、查询参数、hash及末尾空格干扰；子串匹配[href*=".pdf"]易误伤，class等多值属性须改用[class~="btn"]或data属性。
直接用[href$=".pdf"]就能匹配，但必须加i标志才可靠
浏览器默认大小写敏感，[href$=".pdf"]只匹配小写.pdf结尾的链接，对.PDF、.Pdf完全失效。现代浏览器全量支持i标志，加在引号后、选择器闭合前，中间必须有空格：[href$=".pdf" i]。漏掉空格（如[href$=".pdf"i]）或写成[href$=".pdf" I]都会导致规则无效。
带查询参数或hash的链接会不匹配，别指望浏览器自动解析
[href$=".pdf"]做的是原始字符串比对，不是文件扩展名提取。这意味着：
-
href="report.pdf?ts=123"→ 实际属性值以"ts=123"结尾，不匹配 -
href="doc.pdf#section"→ 结尾是"#section"，不匹配 -
href="file.pdf "（末尾有空格）→ 结尾是空格，不匹配
如果链接来自CMS、用户输入或第三方API，这类干扰极常见。更稳的做法是用JS预处理：new URL(el.href).pathname取路径部分，再把后缀写入data-ext，最后用[data-ext$="pdf"]匹配。
别和[href*=".pdf"]搞混，子串匹配会误伤
[href*=".pdf"]只要URL里任意位置含.pdf就命中，比如href="page.html?pdf=1"、href="https://example.com/pdf-tools"全会被选中——这不是你想要的“PDF下载链接”。而$=只看末尾，天然规避这类误匹配。性能上，$=只需比对最后几个字节，现代浏览器对其有专门优化；*=则需扫描整个字符串，长URL下开销明显。
class等空格分隔属性不能套用同一套逻辑
看到[href$=".pdf"]有效，有人会顺手写[class$="btn"]想匹配所有含btn结尾的类名，结果失败。因为class是空格分隔的多值属性，class="primary-btn secondary"的真实属性值是"primary-btn secondary"，结尾是"secondary"，不是"btn"。这种场景该用[class~="btn"]（单词匹配）或改用单值data-属性，比如data-role="primary-btn"再配[data-role$="btn"]。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
