在 html 的内联事件属性（如 `onclick`）中调用含双引号的 javascript 代码时，若选择器本身包含双引号（如 `[action*="12345"]`），会导致引号提前闭合、语法报错；解决方法是统一外层使用双引号，内部属性值改用转义的单引号。
HTML 属性值通常由双引号（"）或单引号（'）包裹，而 document.querySelector() 的参数本身是一个字符串，其中 CSS 选择器又可能包含引号。当选择器中出现与外层 HTML 属性相同类型的引号时，就会发生解析冲突。
例如，原始写法：
❌ 错误原因：外层 onclick 使用双引号，而选择器内部的 "12345" 被浏览器误认为是 onclick 属性值的结束位置，导致后续内容（如 ] .cbSearchButton')...）脱离 JS 上下文，引发语法错误或运行时异常。
✅ 正确做法：保持 onclick 外层为双引号，将选择器内部的属性值引号改为单引号并转义（因字符串本身在双引号 JS 字符串中）：
立即学习“Java免费学习笔记（深入）”；
? 补充说明：
- \' 是 JavaScript 字符串中合法的单引号转义形式，在双引号包裹的字符串内可安全使用；
- 若选择器中还需同时使用单、双引号（极少见），推荐改用模板字符串（但内联 onclick 不支持 ES6 模板字面量），更优解是剥离内联逻辑，改用外部事件监听：
⚠️ 注意事项：
- 避免过度依赖内联 JavaScript，不利于维护、测试和 XSS 防护；
- 所有动态拼接的选择器应做合法性校验，防止注入（如 12345 来自用户输入时需严格过滤）；
- 在现代前端开发中，优先使用 data-* 属性 + 外部脚本，而非将复杂逻辑塞入 onclick。
总之，引号嵌套的核心原则是：外层定界符与内层内容引号类型错开，并确保 JS 字符串语法有效。
