[href$=".pdf"]更可靠，因其严格匹配href属性值以“.pdf”结尾的链接，避免[href*=".pdf"]子串匹配误伤含“pdf”的非pdf链接；必须用英文引号、加i标志忽略大小写、确保href无首尾空格。
为什么[href$=".pdf"]比[href*=".pdf"]更可靠
因为[href*=".pdf"]是子串匹配，会把这种根本不是PDF的链接也标上图标；而[href$=".pdf"]只认准href属性值**以“.pdf”结尾**的链接，比如href="manual.pdf"、href="/files/guide.pdf?ver=2"甚至href="doc.PDF#section"（加i标志后）。关键区别在于：前者看“有没有”，后者看“是不是结尾”。
怎么写才真正生效：大小写、空格、引号一个都不能错
常见失效原因几乎都来自书写细节：
-
a[href$=".pdf" i]必须带i标志，否则.PDF、.Pdf全不匹配 - 引号必须是英文双引号：
"，不是中文“”或单引号' -
i前必须有空格：" .pdf" i错，".pdf" i对 - href属性值里不能有首尾空格——
href=" file.pdf "会导致匹配失败，因为实际字符串结尾是" "，不是".pdf"
::before还是background-image？选哪个更稳
两者适用场景不同：
- 用
::before插Unicode或字体图标（如content: "\f1c1"）时，必须设display: inline-block和vertical-align: middle，否则图标常飘高或换行错位 - 用
background-image（比如data URL内嵌SVG）配padding-left，不依赖content，也不触发伪元素渲染逻辑，更适合图标位置强一致的场景；但得显式设background-size和background-repeat: no-repeat - 别用
content: url(...)——兼容性差，且无法着色或缩放
多个后缀怎么处理？别偷懒合并选择器
想同时支持PDF和ZIP，不能写成a[href$=".pdf"], a[href$=".zip"]::before——这样第二条规则只作用于::before，第一条没伪元素声明，图标不会出现。正确做法是分开写：
a[href$=".pdf" i]::before { content: "?"; }
a[href$=".zip" i]::before { content: "?"; }
如果后缀来源不可控（比如href含查询参数或hash），建议前端用JS提取pathname后存到data-ext，再用[data-ext$="pdf"]匹配——比硬啃href字符串更干净。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
