CSS [attribute$="value"]选择器未按预期生效的问题排查

核心原因 #

[class$="-control-ui"]的匹配逻辑是检查整个class属性字符串的结尾，而非单个类名的结尾：

• 从你给出的结果能看到，所有元素都额外带有hidden类，比如div.x-control-ui.hidden的class属性值实际是"x-control-ui hidden"，字符串结尾是hidden，自然匹配不上-control-ui。
• 就算没有hidden类，像<input class="param x-control-ui">的class属性值是"param x-control-ui"，字符串结尾是x-control-ui，而你要匹配的是-control-ui，同样不满足“整个属性字符串以-control-ui结尾”的条件。

简单说，$=是对整个属性值做后缀匹配，不是对属性里的单个类名做匹配。

解决方法 #

要选中任意类名以-control-ui结尾的元素，可以用以下几种方式：

方式1：明确指定目标类（最直接） #

如果已知所有目标类名，用:is()组合类选择器即可：

document.querySelectorAll(":is(.x-control-ui, .y-control-ui)")

方式2：覆盖所有类名位置的属性匹配 #

通过组合两种属性选择器，覆盖类名在属性值末尾或中间的情况：

// 匹配属性值以-control-ui结尾，或属性值中包含-control-ui后跟空格的元素
document.querySelectorAll("[class$='-control-ui'], [class*='-control-ui ']")

方式3：JS过滤（最灵活） #

先通过*=选中所有包含目标字符串的元素，再用JS过滤出类名符合后缀要求的：

const allCandidates = document.querySelectorAll("[class*='-control-ui']");
const targetElements = Array.from(allCandidates).filter(el => 
  // 检查元素的类列表中是否有类名以-control-ui结尾
  el.classList.some(className => className.endsWith("-control-ui"))
);

内容的提问来源于stack exchange，提问作者teraspora