CSS 的 [class$="value"] 属性选择器无法匹配以指定字符串结尾的 class，根本原因是 class 属性值是空格分隔的字符串，而目标类名 rarely恰好位于字符串末尾（如 "param x-control-ui" 中 -control-ui 并非结尾），导致 $= 匹配失败。
css 的 `[class$="value"]` 属性选择器无法匹配以指定字符串结尾的 class，根本原因是 `class` 属性值是空格分隔的字符串，而目标类名 rarely 几乎从不恰好位于字符串末尾（如 `"param x-control-ui"` 中 `-control-ui` 并非结尾），导致 `$=` 匹配失败。
在实际 HTML 中，class 属性是一个空格分隔的类名列表字符串，其语义上不依赖顺序（例如 class="param x-control-ui" 和 class="x-control-ui param" 完全等价）。而 CSS 属性选择器 [attr$="value"] 要求属性值严格以给定字符串结尾——这意味着它会检查整个 class 字符串的末尾是否完全等于 -control-ui，而非某个独立类名是否以此结尾。
以你的示例为例：
<input type="range" class="param x-control-ui" id="x-control">
其 class 属性值为 "param x-control-ui"（注意末尾无空格），显然不以 -control-ui 结尾（而是以 "ui" 结尾），因此：
document.querySelectorAll("[class$='-control-ui']"); // → []即使你手动写成 class="x-control-ui"（单个类），看似满足条件，但现代框架、JS 库或动态脚本常会向元素追加其他类（如 hidden、active、is-dirty 等），导致 class 值变为 "x-control-ui hidden"，此时 $= 同样失效——这正是该用法脆弱且不可靠的核心原因。
立即学习“前端免费学习笔记（深入）”；
✅ 正确做法：避免依赖 class 字符串位置，改用语义化、可组合的类命名与选择策略：
-
分离关注点：为主控逻辑定义专用类（如
control-ui），再用修饰类表达具体类型：<div class="control-ui control-ui--x">x-control: <output></output></div> <input class="param control-ui control-ui--x" type="range"> <div class="control-ui control-ui--y">y-control: <output></output></div> <input class="param control-ui control-ui--y" type="range">
对应选择器：
document.querySelectorAll(".control-ui"); // 所有控件 document.querySelectorAll(".control-ui--x"); // 仅 x 类型 -
*使用 `data-` 属性增强语义（推荐用于 JS 交互）**：
<input class="param" data-control-type="x" ...> <input class="param" data-control-type="y" ...>
document.querySelectorAll("[data-control-type]"); document.querySelectorAll("[data-control-type='x']"); -
若必须用属性选择器处理
class，唯一安全的通配方式仍是[class*="-control-ui"]，但需注意潜在误匹配（如zoo-control-ui-extra也会被选中）；建议配合.classList.contains()在 JS 中精确判断：Array.from(document.querySelectorAll("[class]")) .filter(el => el.classList.contains("x-control-ui"));
⚠️ 总结：[class$="..."] 在真实项目中几乎总是失效，因其违背 class 属性的设计本质——它不是普通字符串，而是类名集合的序列化表示。坚持使用 .className 或 classList API 进行编程式操作，CSS 侧则采用清晰、扁平、可预测的类名结构，才是健壮、可维护的实践。
