CSS中可用[attr$="suffix"\]匹配属性值以指定字符串结尾的元素，如img\[src$=".webp"]，但不支持类名后缀、正则或多后缀匹配，且需注意大小写敏感、兼容性及性能问题。
用 [attr$="suffix"] 匹配属性值以特定字符串结尾的元素
CSS 本身不支持“文件名后缀”或“类名后缀”这种模糊匹配，但可以用属性选择器实现类似效果——前提是目标信息落在某个 HTML 属性里，比如 href、src、data-type，或者你主动把后缀信息写进 class 或自定义属性中。
最直接的方式是用 $=（结尾匹配）操作符：
img[src$=".webp"] { width: 100%; }
这条规则会选中所有 src 属性以 .webp 结尾的 <img> 元素。注意：它匹配的是整个属性值的**末尾字符串**，不是文件扩展名解析，所以 src="image.webp?v=1" 就不会被命中。
- 只对属性值生效，不能直接匹配类名后缀（比如想选
class="btn-primary"里的primary） - 大小写敏感，
[data-role$="button"]不会匹配data-role="Button" - 不支持正则或通配多个后缀，要同时匹配
.jpg和.png，得写两条规则或用 JS 补充
想按 class 名后缀选元素？得先改 HTML 结构
CSS 没有 .class$="suffix" 这种语法。类名是空格分隔的单词集合，选择器只能精确匹配整个类名（.btn-primary）或用 [class~="primary"] 匹配独立单词，但后者不是“后缀”，而是“含这个单词”。
立即学习“前端免费学习笔记（深入）”；
如果真需要靠后缀驱动样式，推荐把语义后缀单独抽成 data 属性：
<button class="btn" data-variant="primary">确定</button><br><button class="btn" data-variant="danger">删除</button>
然后这样写 CSS：
.btn[data-variant$="primary"] { background: #007bff; }<br>.btn[data-variant$="danger"] { background: #dc3545; }
- 比在 class 里硬塞后缀更清晰，也避免类名冲突（比如
btn-primary-lg的primary就不是后缀） -
data-*属性天然适合存这类结构化元信息，浏览器兼容性好（IE7+） - 别用
[class$="primary"]—— 它会匹配class="my-primary"，但也会错误匹配class="primary-extra"，因为class属性值是完整字符串，不是单词列表
常见踩坑：伪类和属性选择器混用导致失效
比如想给所有以 .pdf 结尾的链接加图标，写成这样是错的：
a[href$=".pdf"]:before { content: "?"; }
问题在于：:before 伪元素要求目标元素是「可生成盒子」的元素，而 <a> 默认是 inline 元素，部分老浏览器（如 IE）不支持给 inline 元素加 :before 内容，或者内容不渲染。
- 加
display: inline-block或display: block才可靠 - 如果只为了加图标，用背景图更稳妥：
a[href$=".pdf"] { padding-left: 20px; background: url(pdf-icon.svg) no-repeat left center; } - 属性选择器优先级和类选择器一样（ specificity = 0,1,0），别误以为它更低而乱加
!important
性能与兼容性：别在大型列表里滥用 $=
现代浏览器对属性选择器优化不错，但在上千个节点的列表里频繁使用 [src$=".jpg"] 这类选择器，仍可能触发重排或影响首次渲染速度——尤其是当属性值很长（比如带完整 URL 和 query 参数）时，浏览器要逐个比对结尾子串。
- 静态资源尽量统一用 class 控制样式，比如构建时给图片打标：
<img src="..." class="img--webp"> - 如果必须用属性匹配，确保属性值简洁，避免
src="https://cdn.com/images/abc.jpg?ts=123&v=2"这种带参数的长值 - IE7–IE8 支持
$=，但不支持其他属性选择器变体（如*=、^=），用之前确认目标环境
真正麻烦的不是语法怎么写，而是得想清楚：那个“后缀”是不是真的该由 CSS 去判断——很多时候，把它提前固化在 HTML 结构或 class 命名里，反而更可控、更容易调试。
