在html内联事件（如onclick）中调用javascript时，若选择器含双引号，易因引号层级冲突导致语法错误；解决关键是合理组合单双引号并正确转义内部引号。
当在onclick属性中使用document.querySelector()，而CSS选择器本身包含双引号（例如[action*="12345"]）时，外层HTML属性值已用双引号包裹（onclick="..."），此时选择器内的双引号会被浏览器误认为是HTML属性值的结束符，从而引发解析错误或脚本失效。
✅ 正确做法是：外层用双引号定义HTML属性，选择器内部改用单引号，并对单引号进行反斜杠转义（因整个字符串处于双引号JS字符串中，需确保JS语法合法）：
点击触发搜索
? 原理说明：
- onclick="..." → HTML属性值由双引号界定；
- document.querySelector('...') → JS字符串由单引号界定，更易嵌入含双引号的CSS选择器；
- [action*='12345'] 中的单引号在JS中合法，但因该字符串整体位于HTML双引号内，且JS引擎会解析该字符串字面量，故无需额外转义——然而，在HTML上下文中，为避免部分解析器混淆，显式转义 ' 为 \' 是更稳妥的实践（尤其在旧版浏览器或严格HTML校验场景下）。
⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 避免三层嵌套引号（如 onclick="querySelector("[a="v"]")"），可读性差且易出错；
- 更推荐将逻辑移至外部JS函数，提升可维护性与安全性：
点击搜索
- 若使用模板字符串（ES6+），外部JS中可直接用反引号，完全规避引号冲突问题。
总之，引号嵌套的本质是分层界定：HTML属性 → JavaScript字符串 → CSS选择器。明确每一层的界定符，并保持层级间不冲突，是写出健壮内联脚本的关键。
