a[href$=".pdf" i]::after 是稳定添加 pdf 图标的关键写法，i 标志实现大小写不敏感匹配，需严格空格、禁用大写 i，且须设置 display: inline-block 和 vertical-align: middle 确保对齐。
直接用 a[href$=".pdf" i]::after 就能稳定加图标，加 i 标志是关键，否则大小写不一致的链接（比如 .PDF、.Pdf）会漏掉。
为什么 a[href$=".pdf"] 经常不生效
根本不是选择器写错了，而是匹配被细节卡住：
-
[href$=".pdf"]默认区分大小写，report.PDF和doc.Pdf全都不命中 - 漏掉点号写成
[href$="pdf"]，会误中myappdf这类字符串 - 用了中文引号
“.pdf”或前后多空格[href$= ".pdf"]，整条规则静默失效 -
content: ""不会显示任何东西——伪元素创建了，但内容为空，得填值才行
a[href$=".pdf" i]::after 的最小可行写法
加 i 是唯一纯 CSS 覆盖大小写的办法，且空格和大小写必须严格：
- ✅ 正确：
a[href$=".pdf" i]::after、a[href$=".zip" i]::after - ❌ 错误：
a[href$=".pdf"i]（少空格）、a[href$=".PDF" i]（多余大写）、a[href$=".pdf" I]（I大写无效） - 带查询参数（
file.pdf?ver=2）或锚点（doc.pdf#page=3）仍能命中，只要.pdf紧挨着?或#或结尾
图标对齐总出问题？关键是 display 和 vertical-align
::after 默认是 inline 元素，文字换行、缩放、不同字体下极易错位：
- 必须设
display: inline-block或inline-flex，否则vertical-align无效 -
vertical-align: middle只对 inline 元素起作用，但前提是父<a></a>行高稳定（建议显式设line-height） - 避免用
em控制尺寸，width: 16px; height: 16px;更可控 - 如果用
background-image，记得加background-repeat: no-repeat和background-position: right center
最易被忽略的是：属性选择器只看 DOM 中最终渲染出的 href 字符串值，如果 JS 动态改过链接、服务端做了重写、或 HTML 里 href 值本身带前后空格（如 href=" file.pdf "），匹配就会失败——这种情况下，i 标志也救不了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
