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; }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"）class、id 值区分大小写；而自定义 data- 属性也默认区分以上就是css匹配以某属性值结尾的元素怎么写_使用[attr$=value]完成匹配的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
871
收藏
