[href$=".pdf"] 是css属性结尾匹配选择器，表示精准匹配href属性值严格以“.pdf”结尾的元素，区分大小写、不解析url参数，仅校验字符串末尾完全一致。
什么是 [href$=".pdf"] 这类选择器
它叫「属性结尾匹配选择器」，$= 表示“属性值以指定字符串结尾”。比如 [href$=".pdf"] 能精准选中所有 href 以 .pdf 结尾的链接，不误伤 report.pdf?id=1 或 my.pdfx 这类干扰项——因为浏览器解析 URL 时，查询参数（?...）和锚点（#...）不属于 href 属性值的“结尾”，实际匹配的是整个字符串末尾。
为什么直接写 [href$=".pdf"] 常常不生效
常见失效原因有三个：
- HTML 中
href值是相对路径或带协议的完整 URL，但后缀被路径分隔符干扰，比如href="docs/manual.pdf"可以匹配，而href="/files/data.pdf?v=2"就不行——v=2在.pdf后面，导致结尾不是.pdf - CSS 优先级不够，被更具体的规则（如
a.download-icon）覆盖 - 部分旧版 IE（≤8）根本不支持
$=，但现代项目通常已无需兼容
解决办法：优先用服务器或构建工具统一输出规范路径（如去除查询参数），或改用 JavaScript 辅助补全逻辑；若必须纯 CSS，可叠加多个选择器：[href$=".pdf"], [href*=".pdf?"], [href*=".pdf#"]，但注意 *= 易误匹配（如 apdf）。
给下载链接加图标的具体写法
核心是用 ::after 伪元素插入图标，并通过 content 配合字体图标（如 Font Awesome）或 base64 图片。关键细节：
- 必须设置
display: inline-block或inline-flex，否则::after的宽高、垂直对齐会异常 - 推荐用
background-image+padding-left方式，比content更可控（避免字体图标加载失败变方块） - 为防图标与文字重叠，需预留左侧间距：
padding-left: 20px，并用background-position: left center
a[href$=".pdf"] {
display: inline-block;
padding-left: 24px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23007bff'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z'/%3E%3Cpath d='M16 13.5v-2h-4v2h4zm0-4v-2h-4v2h4z'/%3E%3C/svg%3E") no-repeat left center;
background-size: 16px;
}
扩展支持更多文件类型要小心什么
批量加图标时，别堆砌一堆重复规则。错误写法：a[href$=".pdf"], a[href$=".doc"], a[href$=".xlsx"] { ... } —— 这会让所有规则共享同一套样式，无法按类型区分图标。
- 每个后缀单独写，确保图标路径/颜色/尺寸可独立控制
- 注意 MIME 类型无关性：CSS 不识别文件真实类型，只看字符串，所以
.csv文件若被命名为data.txt，就不会命中[href$=".csv"] - 如果站点用 CDN 或代理，URL 中可能插入路径前缀（如
/cdn/v1/report.pdf），此时需调整选择器为[href$="/report.pdf"]或改用 JS 动态判断pathname
真正难的不是写对选择器，而是让所有下载链接的 URL 格式在源头就保持一致——否则后期靠 CSS 补救，只会越加越多 *= 和正则式 hack。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
