使用[attr$="val"]选择器可匹配属性值以指定字符串结尾的元素，如a[href$=".pdf"]{color:red;}使PDF链接变红加粗，[class$="btn"]仅匹配class属性值整体以btn结尾的元素，需注意大小写敏感及多类名限制。
在CSS中，你可以使用属性选择器来匹配元素的属性值以特定字符结尾。这通过 属性选择器 中的 $= 操作符实现，它用于选择属性值 以指定字符串结尾 的元素。
语法：属性值以特定字符结尾
使用[attribute$="value"] 语法来选择属性值以指定内容结尾的元素。
示例1：选择以特定字符串结尾的链接
比如你想选中所有文件名为.pdf 结尾的链接：
a[href$=".pdf"] {
color: red;
font-weight: bold;
}
这个规则会让所有跳转到PDF文件的链接变成红色加粗。
示例2：选择以特定字符结尾的类名（不推荐仅靠此方式）
CSS不能直接“选择类名以某字符结尾”除非你用属性选择器匹配
class 属性整体值。注意：一个元素可能有多个类，所以要小心使用。
[class$="btn"] {
border: 1px solid #ccc;
}
这条规则会匹配 class="submit-btn" 这种整个 class 属性以 btn 结尾的情况，但不会匹配 class="btn primary"，因为属性值是以 primary 结尾的。
提示与注意事项
立即学习“前端免费学习笔记（深入）”；
-
$=是大小写敏感的，除非你配合i标志（在支持的情况下）进行不区分大小写的匹配。 - 对于 class 或 data 属性，确保理解属性值是完整字符串，而不是单个词。
- 若要更灵活地匹配类名中的某个部分，建议结合JavaScript或使用更现代的方案如
:has（在支持的浏览器中）。
[attr$="val"] 可以高效定位属性值结尾固定的元素，适合处理URL、文件类型、自定义属性等场景。 
