在 html 内联事件（如 `onclick`）中调用 javascript 时，若选择器含双引号，易与属性值外层双引号冲突；解决方法是统一外层用双引号、内层选择器用转义单引号，或改用模板字符串等更安全方式。
当在 HTML 的 onclick 属性中直接编写 JavaScript 代码（例如 document.querySelector(...)），必须特别注意引号的嵌套与转义规则。HTML 属性值本身已用双引号包裹（如 onclick="..."），此时若 JavaScript 字符串内部再使用未转义的双引号（如 "[action*="12345"]"），解析器会将第一个 " 误认为属性值的结束，导致语法断裂和脚本失效。
✅ 正确做法是：外层 HTML 属性用双引号，JavaScript 字符串内部改用单引号，并对必要位置进行转义。例如：
点击触发搜索
⚠️ 注意：上面示例中 " 是 HTML 实体，适用于需在 HTML 中显式表示双引号的场景；但更简洁、推荐的写法是直接在 JS 字符串中使用转义单引号（因单引号在 HTML 属性中无需转义），如下：
点击触发搜索
该写法逻辑清晰：
立即学习“前端免费学习笔记（深入）”；
- onclick="..." → 外层双引号界定 HTML 属性；
- '...' → JS 字符串使用单引号，避免与外层冲突；
- \' → 在单引号字符串中，对内部单引号（如属性值中的 '12345'）进行转义（实际此处无需转义，因 12345 本身不含单引号；真正需要转义的是选择器中可能出现的单引号，如 [data-id='user\'s-item']）；
- 更稳妥的实践是：优先用单引号写 CSS 选择器，仅在必要时转义，且避免在选择器中混用未转义的同类型引号。
? 进阶建议：
- ✅ 推荐剥离内联 JS，改用事件委托或 addEventListener，彻底规避引号嵌套问题；
- ✅ 若必须动态生成选择器，可借助 JSON.stringify() 保证字符串安全（服务端或构建时）；
- ❌ 避免多层嵌套如 onclick="...\"...\"..." —— 可读性差、易出错。
总之，引号秩序的本质是「层级隔离」：HTML 属性引号 ≠ JavaScript 字符串引号。明确分层、合理选用单/双引号并辅以必要转义，即可稳健处理各类 CSS 选择器嵌入场景。
