[href$=".pdf" i] 常不生效主因是大小写敏感与语法错误：浏览器默认区分大小写，故无法匹配 report.pdf；漏点号、用中文引号、空格、误用 = 或 *= 均导致失效；::before 要稳定需设 content: ""、display: inline-block、vertical-align: middle 并防换行。
能，但必须写对选择器、加 i 标志、用对伪元素渲染方式，否则大概率不生效或误匹配。
为什么 [href$=".pdf"] 常不生效
最常见原因是大小写敏感和语法错误。浏览器默认严格区分大小写，[href$=".pdf"] 不会匹配 REPORT.PDF 或 doc.Pdf。另外：
- 漏掉点号写成
[href$="pdf"]→ 会命中myappdf这类非 PDF 链接 - 用了中文引号或前后空格：
[href$= '.pdf' i]或[href$=“.pdf” i]→ 整条规则被浏览器忽略 - 写成
[href=".pdf"]→ 只匹配 href 值**完全等于**.pdf的链接（几乎不存在） - 用了
[href*=".pdf"]→ 会误中https://api.example.com/pdf-report.html
a[href$=".pdf" i]::before 怎么写才稳定
用 ::before 插入图标比 background-image 更可控，但必须满足几个前提：
- 必须声明
content，哪怕只是content: ""；空值或content: none都不渲染 - 父
a元素最好设white-space: nowrap，防止换行时图标错位或断开 -
::before必须设display: inline-block，否则vertical-align和尺寸控制失效 - 推荐加
vertical-align: middle，而不是靠top或transform微调——后者在缩放或字体变化时容易偏移 - 如果用 Font Awesome 图标，必须显式指定
font-family和font-weight: 900，且名称要和@font-face中一致
带查询参数或锚点的 PDF 链接还匹配吗
匹配。只要 .pdf 出现在 href 字符串的末尾位置之前（即紧挨着 ?、# 或字符串终点），$= 就能命中。例如：
-
report.pdf?ver=2→ ✅ 匹配 -
file.pdf#section1→ ✅ 匹配 -
archive.PDF?download=true→ ✅ 匹配（有i标志） -
https://example.com/doc.pdf?v=1&src=main→ ✅ 匹配（&是 HTML 实体，实际属性值仍是&，不影响结尾判断）
真正不匹配的情况只有：href 属性值本身带前后空格（如 " file.pdf "），或服务器返回的链接被意外截断/编码错误。
多个后缀怎么处理才不混乱
别试图用逗号合并或正则，CSS 不支持。每种后缀单独写规则，保持可读和可维护：
a[href$=".pdf" i]::before { content: "?"; }a[href$=".zip" i]::before { content: "?"; }a[href$=".docx" i]::before { content: "?"; }
如果用 SVG data URL，也建议每个后缀单独定义 background-image —— 混用同一张图再靠 background-position 切片，后期改图标或加新类型时极易出错。另外，i 标志必须每个都加，不能只写在第一条里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
