本文详解 querySelectorAll 中 [class$=”…”] 选择器失效的根本原因——HTML class 属性值是空格分隔的多类名字符串，而非单一值；并提供两种可靠解决方案：调整 class 顺序配合 $= 或使用 *= 安全匹配，附可运行示例与关键注意事项。
本文详解 `queryselectorall` 中 `[class$=”…”]` 选择器失效的根本原因——html `class` 属性值是空格分隔的多类名字符串，而非单一值；并提供两种可靠解决方案：调整 class 顺序配合 `$=` 或使用 `*=` 安全匹配，附可运行示例与关键注意事项。
在实际开发中，我们常希望通过 JavaScript 动态操作具有某种命名模式的元素。例如，批量移除所有 class 名以 -lvl1 结尾的
document.querySelectorAll('[class$="-lvl1"]');但该代码不会返回任何元素——即使 dom 中存在
❗ 根本原因：class 属性值不是“以 -lvl1 结尾”
class 是一个 HTML 属性，其值为完整字符串（如 “A-lvl1 hidden”）。由于 hidden 出现在 -lvl1 之后，整个 class 属性实际以 “hidden” 结尾，而非 “-lvl1″。因此 [class$=”-lvl1″] 匹配失败——它要求属性值字面量结尾必须是 -lvl1，而现实是结尾为 hidden（含末尾空格）。
✅ 方案一：使用 *=（包含匹配），简单直接
[class*=”-lvl1″] 表示：匹配 class 属性值中任意位置包含 -lvl1 的元素。它不关心 -lvl1 是否在开头、中间或结尾，只要子字符串存在即命中。
立即学习“前端免费学习笔记（深入）”；
// ✅ 推荐：适用于 class 顺序不确定的场景 document.querySelectorAll('[class*="-lvl1"]').forEach(el => { el.classList.remove('hidden'); });✅ 优势：无需修改 HTML，兼容现有 class 顺序（如 “A-lvl1 hidden”）。
⚠️ 注意：存在潜在误匹配风险。例如，若存在
✅ 方案二：调整 HTML class 顺序，继续使用 $=（结尾匹配）
若能控制 HTML 输出，将目标 class（如 A-lvl1）置于 class 属性末尾，则 $= 可精确生效：
<!-- 修改前（不匹配） --> <div class="A-lvl1 hidden">A</div> <!-- 修改后（可匹配） --> <div class="hidden A-lvl1">A</div>对应 js 保持原样：
// ✅ 精确匹配：仅当 -lvl1 是 class 属性的字面结尾时生效 document.querySelectorAll('[class$="-lvl1"]').forEach(el => { el.classList.remove('hidden'); });✅ 优势：语义精准，零误匹配。
⚠️ 注意：需全局统一 class 顺序策略，且对第三方组件或动态渲染内容可能不可控。
? 验证与调试建议
- 在浏览器控制台中执行 console.log([…document.querySelectorAll(‘[class*=”-lvl1″]’)]) 查看匹配结果；
- 使用 el.className.split(‘ ‘) 检查实际 class 列表，确认目标类是否存在；
- 避免过度依赖 *= —— 如需更高可靠性，推荐结合 Array.from(el.classList).some(cls => cls.endsWith(‘-lvl1’)) 进行 JavaScript 层逻辑判断（虽性能略低，但 100% 准确）。
? 总结
| 方案 | 选择器 | 前提条件 | 安全性 | 推荐场景 |
|---|---|---|---|---|
| 包含匹配 | [class*=”-lvl1″] | 无需改 HTML | ⚠️ 需规避子串冲突 | 快速原型、命名规范严格时 |
| 结尾匹配 | [class$=”-lvl1″] | class 属性中 -lvl1 必须在末尾 | ✅ 绝对精确 | 可控 HTML 结构、追求语义严谨 |
真正理解 class 属性的字符串本质，是写出健壮 DOM 查询逻辑的第一步。优先用 *= 解决问题，再根据项目约束评估是否升级为更严格的匹配策略。