CSS中用[attr$=value]匹配属性值以指定字符串结尾的元素，$=为结尾匹配操作符，要求属性值完全以value结尾，不区分大小写但属性值本身区分大小写。
![css匹配以某属性值结尾的元素怎么写_使用[attr$=value]完成匹配](https://img.php.cn/upload/article/000/969/633/176597340269838.jpeg)
要匹配属性值以特定字符串结尾的元素，用 CSS 的属性选择器 [attr$=value] 即可。
语法说明
其中 $= 是“结尾匹配”操作符，表示属性值必须**完全以指定 value 结尾**（不区分大小写，但注意：CSS 属性值本身是区分大小写的，比如 class 值为 btn-primary 和 btn-Primary 被视为不同）。
-
attr是你要检测的属性名，如class、href、src、data-type等 -
value是你希望匹配的结尾字符串，不加引号（除非含空格或特殊字符，此时需用引号包裹）
常见使用示例
匹配所有 href 以 ".pdf" 结尾的链接：
a[href$=".pdf"] { color: red; font-weight: bold; }
匹配 class 名以 "btn" 结尾的按钮（如 my-btn、submit-btn）：
立即学习“前端免费学习笔记（深入）”；
[class$="btn"] { padding: 8px 16px; }
red">⚠ 注意：这个写法会匹配 class="btn" 或 class="big-btn"，但不会匹配 class="btn-primary"（因为不是以 "btn" 结尾），也不会匹配 class="btn disabled"（因空格后还有内容，实际值以 "disabled" 结尾）。
搭配其他选择器更精准
单独用 [class$="btn"] 容易误匹配，建议结合标签或其它属性提升准确性：
-
button[class$="btn"]—— 只选 button 元素中 class 以 "btn" 结尾的 -
[data-role$="dialog"]—— 匹配data-role="modal-dialog"或data-role="confirm-dialog" -
img[src$=".webp"]—— 高效筛选 WebP 格式图片
兼容性与注意事项
[attr$=value] 在所有现代浏览器中均支持（包括 IE7+），无需前缀。但要注意：
- 它匹配的是**整个属性值**的结尾，不是单词结尾。例如
[class$="btn"]不会匹配class="btn btn-lg"（值是 "btn btn-lg"，结尾是 "lg"） - 若需“包含某单词结尾”或“空格分隔的结尾类”，应改用 JavaScript 或预处理器逻辑，纯 CSS 无法实现
- 对大小写敏感性取决于属性本身：HTML 中
class、id值区分大小写；而自定义data-属性也默认区分
