[attr$="value"]选择器精准匹配属性值严格以指定字符串结尾的元素，如pdf链接、svg图片、-mobile类名；它区分大小写、不支持通配符或正则，仅校验结尾完全一致。
![如何根据属性值的结尾匹配元素_使用css属性选择器[$=]语法](https://img.php.cn/upload/article/000/969/633/178123952590614.jpeg?x-oss-process=image/resize,p_40)
用 [attr$="value"] 匹配属性值以特定字符串结尾的元素
这个选择器能精准捕获 href、src、class 等属性值**严格以指定字符串结尾**的元素，比如所有 PDF 链接、所有 SVG 图片、所有带 -mobile 后缀的类名。它不关心前面是什么，只校验结尾是否完全一致。
常见错误是误以为它支持通配符或忽略大小写——它完全区分大小写，且不接受正则语法。例如 [href$=".pdf"] 不会匹配 https://example.com/doc.PDF 或 report.pdf?ver=1。
-
[href$=".pdf"]→ 匹配<a href="guide.pdf"></a>，但不匹配<a href="guide.PDF"></a> -
[src$="/icon.svg"]→ 匹配<img src="assets/icon.svg">，但不匹配<img src="assets/icon.svg?v=2"> -
[class$="-btn"]→ 匹配<button class="primary-btn"></button>，但不匹配<button class="btn-primary"></button>（结尾不是-btn）
为什么 [attr$="value"] 有时不生效？检查这三点
实际写的时候经常“写了却没反应”，多数卡在这几个细节上：
- 属性值必须是**完整字符串结尾**：浏览器解析后 DOM 中的属性值可能被标准化（如空格压缩、URL 解码），
getAttribute('href')查看真实值再写选择器 - HTML 属性未显式声明时无法匹配：如果元素靠 JS 动态添加
data-type，但 CSS 在 JS 执行前已加载，则选择器不会回溯生效 - 优先级被覆盖：它本身优先级不高（仅 10），容易被
.class（10）或#id（100）覆盖，调试时加!important确认是否命中，再调整结构
和 [attr*="value"]、[attr~="value"] 的关键区别
这三个都常被混用，但语义和行为完全不同：
-
[attr$="value"]：只看**结尾是否完全相等**，适合文件扩展名、固定后缀类名等确定性场景 -
[attr*="value"]：只要属性值中**任意位置包含子串**，比如[href*="login"]会同时匹配/login、/user/login/form，但容易误伤 -
[attr~="value"]：专用于空格分隔的单词匹配（类似class），[class~="btn"]能匹配class="btn primary"，但对class="btn-lg"无效
选错会导致样式错配或性能隐忧——*= 在长属性值上需全扫描，而 $= 可快速比对末尾字节，现代浏览器对其有优化。
真实项目里最稳妥的用法示例
直接贴进项目能跑的片段，注意路径和引号格式：
/* 给所有本地 PDF 链接加图标 */
a[href$=".pdf"]:not([href^="http"])::before {
content: "? ";
}
<p>/<em> 隐藏所有以 -legacy 结尾的 script 标签（避免重复加载） </em>/
script[src$="-legacy.js"] {
display: none;
}</p><p>/<em> 为响应式图片加 loading 提示 </em>/
img[src$="-mobile.jpg"], img[src$="-mobile.png"] {
filter: blur(1px);
}</p>
注意：多个后缀要分开写，[src$="-mobile.jpg" i] 中的 i 是实验性语法（仅 Safari 支持大小写不敏感），生产环境别依赖。
真正难的是判断属性值在渲染后的真实形态——尤其涉及构建工具重写路径、CDN 添加查询参数、或 SSR 注入时的 HTML 序列化差异。动手前先打开 DevTools → Elements → 右键「Edit as HTML」确认最终输出。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
