匹配PDF/ZIP等后缀链接必须用[href$=".pdf" i]等带i标志的属性选择器，否则大小写敏感导致漏匹配；伪元素图标需设content、font-family、currentColor和vertical-align: middle才能正确显示与对齐。
匹配 PDF/ZIP 等后缀链接必须用 [href$=".pdf" i]，别写错操作符
直接用 [href$=".pdf"] 会漏掉大写的 .PDF 或混合大小写（如 .Pdf），浏览器默认区分大小写。加 i 标志是唯一稳妥方式：[href$=".pdf" i]。常见错误包括：
• 写成 [href=".pdf"] —— 只匹配完整等于 "https://a.com/.pdf" 的 URL，几乎永不会命中
• 写成 [href*="pdf"] —— 会误中 https://api.example.com/v1/pdf-report 这类含子串的地址
• 忘记引号或用中文引号 —— [href$=“.pdf” i] 会导致整个规则失效
实际建议统一用小写后缀 + i，覆盖所有情况：[href$=".pdf" i]、[href$=".zip" i]、[href$=".docx" i]
::before 图标不显示？先检查 content 和 font-family 是否生效
伪元素不渲染的头号原因是 content 值非法或为空：
• content: none 或未声明 content → 直接不创建节点
• content: "" → 创建空节点，但无内容可显示
• 复制粘贴时混入全角引号或不可见字符 → 浏览器解析失败
若用 Font Awesome 等图标字体，必须显式设置 font-family 和 font-weight：
• font-family: "Font Awesome 6 Free"（注意名称必须与 @font-face 中一致）
• font-weight: 900（多数 FA 图标需 solid 字重）
在开发者工具中检查 ::before 计算出的 font-family 值，不是看声明，而是看“Computed”面板里最终生效的那个
图标对不齐文字？别硬调 top，优先用 vertical-align: middle 或 display: inline-block
默认 ::before 是 inline 元素，按基线（baseline）对齐，而文字有 descender（如 g、y 的下延部分），图标没有，视觉上就“飘高了”。解决方式：
• 加 display: inline-block 后，再设 vertical-align: middle —— 这是最轻量且兼容性好的方案
• 避免 vertical-align: top：它让图标贴着行框顶部，和文字中线脱节
• 慎用 position: absolute：需要父元素 position: relative，且 top: 50%; transform: translateY(-50%) 在 font-size 变化时仍可能偏移
• 如果父元素用了 line-height: 2，改 vertical-align 值会明显影响位置——这是正常行为，不是 bug
图标颜色和尺寸怎么随文本变化？用 currentColor 和 em
硬写死 color: #007bff 或 font-size: 16px 会让图标在深色主题、缩放、响应式断点下断裂。更健壮的做法：
• color: currentColor —— 图标颜色自动继承父元素文字色，深色模式开箱即用
• font-size: 1em 或 0.85em —— 图标大小随上下文字号等比缩放，避免在 14px 文字旁塞一个 16px 图标导致拥挤
• margin-right: 0.3em —— 用相对单位控制间距，比 4px 更适应不同密度屏幕
注意：currentColor 对 SVG 背景图无效，仅对字体图标或 Unicode 字符起作用；若用 background-image: url(...)，就得靠 CSS 变量或 JS 控制 fill 颜色
真正容易被忽略的是：伪元素图标天生不可访问。无论你加多少 aria-label 到父 上，读屏软件都不会把 ::before 里的 content: "\f019" 当作“下载图标”来读。如果该图标承载语义（比如表示“此链接将触发文件下载”），就得用真实 或 标签替代，再配 aria-hidden="true" 隐藏装饰性部分。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
