[attr$="value"\] 只能精确匹配属性值字面量结尾，不支持正则；如\[data-id$="\d+"]会失效，仅[src$=".png"]等固定字符串有效，且大小写敏感、忽略前后空格。
![css如何选择属性值以某字符串结尾的元素_使用[attr$=\'value\']正则选择器](https://img.php.cn/upload/article/000/969/633/177407607274240.jpeg)
用 [attr$="value"] 选属性值结尾匹配的元素，不是正则
这个选择器不支持正则表达式，$= 是 CSS 属性选择器的“结尾匹配”操作符，只做字面量精确结尾比对，不是通配或模糊匹配。
常见误解是以为能写 [data-id$="\d+"] 这类正则，实际会直接失效——浏览器根本不解析里面的反斜杠和元字符。
- 只能匹配固定字符串，比如
[src$=".png"]可以选所有src值以.png结尾的<img alt="CSS如何选择属性值以某字符串结尾的元素_使用[attr$=‘value’]正则选择器" > - 大小写敏感，
[class$="btn"]不会匹配class="Button" - 中间有空格也不行：
data-role=" dropdown"（前面带空格）不会被[data-role$="dropdown"]选中
[attr$="value"] 在真实 HTML 中容易失效的几种情况
看似写对了，但页面没反应，大概率是属性值和预期不符。CSS 选择器对空格、引号、编码极其敏感。
- HTML 中属性值用了双引号但实际含空格或换行，比如
data-url="https://a.com/path/to/file.json?x=1&y=2"，结尾其实是2"，不是.json - 服务端模板渲染时自动加了空格或换行，导致
class="item active "（末尾空格）无法被[class$="active"]匹配 - 属性是动态插入的（如 JS 设置
el.setAttribute('data-id', id)），但未触发样式重计算，需确认 DOM 确实已存在该属性
想实现真正“以某模式结尾”，得靠 JS 配合 querySelectorAll
CSS 原生做不到正则结尾匹配，但可以用 querySelectorAll 拿到候选集，再用 JS 过滤。
立即学习“前端免费学习笔记（深入）”；
例如：选所有 data-src 值以 .webp 或 .avif 结尾的图片：
document.querySelectorAll('[data-src]').filter(el =>
/\.(webp|avif)$/.test(el.getAttribute('data-src'))
)
- 注意
querySelectorAll('[data-src]')先粗筛有该属性的元素，避免遍历全部 DOM - 用
getAttribute()而非dataset.src，因为后者会自动转小写且去掉前缀，丢失原始大小写和连字符 - 正则里
$必须写在字符串末尾，且要确保属性值没意外空格——建议先.trim()
用 [attr$="value"] 前先验证属性值长什么样
别凭感觉写，打开控制台，挑一个目标元素，手动检查它的属性值实际内容。
- 右键「检查」→ 在 Elements 面板里找到元素 → 看属性那一行，注意引号类型、前后空格、是否被转义（如
"） - 在 Console 里执行
getComputedStyle(document.querySelector('your-selector')).content或直接el.getAttribute('attr')看原始字符串 - 如果值含 URL，注意协议头（
http://）、路径分隔符（/）、查询参数（?）都会影响结尾判断
属性值和你写的 "value" 差一个空格，整个选择器就静默失败，这点最容易被忽略。
