querySelectorAll失效：移除类名以-lvl1结尾的div的hidden类

你的问题出在[class$="-lvl1"]这个属性选择器上——它是匹配整个class属性字符串的结尾，而你的元素class属性是"A-lvl1 hidden"，结尾是hidden，自然匹配不到任何元素。

要实现“匹配单个类名以-lvl1结尾”的需求，有两种可靠方式：

方式一：用JavaScript精准筛选元素 #

遍历所有div元素，检查每个元素的类名列表里是否有以-lvl1结尾的类，再移除hidden类：

const elements = document.querySelectorAll('div');
elements.forEach(element => {
  // 检查是否存在以"-lvl1"结尾的类名
  const hasTargetClass = Array.from(element.classList).some(cls => cls.endsWith('-lvl1'));
  if (hasTargetClass) {
    element.classList.remove('hidden');
  }
});

方式二：使用组合CSS选择器（有局限性） #

如果想用CSS选择器直接匹配，可组合两个选择器覆盖类名在末尾或中间的情况：

const elements = document.querySelectorAll('div[class*="-lvl1 "], div[class$="-lvl1"]');
elements.forEach(element => {
  element.classList.remove('hidden');
});

注意：这种方式可能误匹配类似test-lvl1-extra的类名，如果你的类名规则严格是xxx-lvl1，可以放心用；否则更推荐方式一。

完整示例代码 #

HTML #

<div class="A-lvl1 hidden">A</div>
<div class="B-lvl1 hidden">B</div>
<div class="C-lvl1 hidden">C</div>
<div class="D-lvl2 hidden">D</div>

CSS #

.hidden {
  display: none;
}

JavaScript（推荐方式一） #

const elements = document.querySelectorAll('div');
elements.forEach(element => {
  const hasTargetClass = Array.from(element.classList).some(cls => cls.endsWith('-lvl1'));
  if (hasTargetClass) {
    element.classList.remove('hidden');
  }
});

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