17370845950

CSS中用[attr$=value]匹配属性值以指定字符串结尾的元素，$=为结尾匹配操作符，要求属性值完全以value结尾，不区分大小写但属性值本身区分大小写。

要匹配属性值以特定字符串结尾的元素，用 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"）
• 若需“包含某单词结尾”或“空格分隔的结尾类”，应改用 JavaScript 或预处理器逻辑，纯 CSS 无法实现
• 对大小写敏感性取决于属性本身：HTML 中 class、id 值区分大小写；而自定义 data- 属性也默认区分