本文详解 querySelectorAll 中 [class$="..."] 选择器失效的根本原因——HTML class 属性值是空格分隔的多类名字符串，而非单一值；并提供两种可靠解决方案：调整 class 顺序配合 $= 或使用 *= 安全匹配，附可运行示例与关键注意事项。
本文详解 `queryselectorall` 中 `[class$="..."]` 选择器失效的根本原因——html `class` 属性值是空格分隔的多类名字符串，而非单一值；并提供两种可靠解决方案：调整 class 顺序配合 `$=` 或使用 `*=` 安全匹配，附可运行示例与关键注意事项。
在实际开发中，我们常希望通过 JavaScript 动态操作具有某种命名模式的元素。例如，批量移除所有 class 名以 -lvl1 结尾的
元素上的 hidden 类，使其重新显示。直觉上，我们会尝试使用 CSS 属性选择器中的「结尾匹配」语法 $=：
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"）。
⚠️ 注意：存在潜在误匹配风险。例如，若存在
，*="-lvl1" 也会匹配（因包含子串 -lvl1），导致非预期行为。因此需确保命名具备足够区分度（如统一用 -lvl1 而非 -lvl10）。
✅ 方案二：调整 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 查询逻辑的第一步。优先用 *= 解决问题，再根据项目约束评估是否升级为更严格的匹配策略。
