[href$=".pdf" i] 是唯一纯css大小写不敏感匹配pdf链接的方案，需严格满足空格、英文引号、小写i等条件；带参数或hash的链接可匹配，但含中间编码或重写路径则失效。
为什么 [href$=".pdf"] 常常不生效
不是选择器写错了，而是真实 DOM 中的 href 值往往不“干净”：比如 href="report.PDF"（大小写不一致）、href="doc.pdf?ts=1"（结尾是数字）、href=" file.pdf "（首尾空格）、href="manual.pdf#section"（结尾是 hash）。这些都会让 [href$=".pdf"] 静默失效——它只做字符串结尾全等匹配，不解析 URL 结构。
必须加 i 标志，且写法要严格
[href$=".pdf" i] 是当前唯一纯 CSS 覆盖大小写的方案，Chrome 120+、Firefox 115+、Safari iOS 17+ 全支持。但以下细节错一个就白写：
-
i前必须有空格：".pdf" i✅，".pdf"i❌ - 引号必须是英文双引号：
"✅，“或'❌ -
i必须小写：I或Im都无效 - HTML 中
href值不能含首尾空格，否则匹配的是空格而非.pdf
带参数或 hash 的链接仍能命中，但有边界
[href$=".pdf" i] 对 report.pdf?ver=2、guide.Pdf#top 这类链接有效，因为浏览器 DOM 中的 href 属性值确实是这些完整字符串，而 .pdf（忽略大小写后）紧挨着 ? 或 # 前的位置。
但它无法覆盖 file.PDF&lang=zh（& 在中间）或 https://cdn.example.com/data.PDF?t=123（如果服务端重写过路径导致实际属性值结尾不是 .PDF）。
若需 100% 可靠，前端应预处理：
- 用 JS 提取
new URL(el.href).pathname得到纯路径 - 转小写后取后缀，存为
data-ext="pdf" - 再用
[data-ext$="pdf"]匹配——完全脱离 href 字符串干扰
图标渲染最容易被忽略的三件事
写了 ::before 却看不到图标？大概率卡在这三点：
-
content不能为空字符串；至少填content: ""并配合display: inline-block+ 尺寸，或直接用字体图标content: "\f1c1" -
::before默认是inline，不设display: inline-block和vertical-align: middle，图标会飘高或换行 - 父级
a若有overflow: hidden、text-overflow: ellipsis或display: flex，伪元素可能被裁掉或错位
真正稳定的做法是放弃伪元素，改用 background-image + padding-left，位置可控、不依赖文本流，也避免可访问性隐患。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
