核心是“兜住错”：通过CSS.escape()转义、属性选择器替代、封装safeQuery函数及开发期Lint拦截，确保非法CSS字符串不中断脚本。
避免
因非法 CSS 字符串中断脚本，核心不是“写对”，而是“兜住错”——让错误不冒泡、不阻断后续逻辑。重点在于提前过滤、安全降级和运行时防御。
对动态 ID/类名做基础校验与转义
用户输入、后端返回或 URL 参数生成的选择器最容易含非法字符（如空格、冒号、点、尖括号）。直接拼接会触发语法错误，导致 JS 停止执行。
用
处理任意字符串：
（现代浏览器均支持，IE 不支持但已淘汰）
若需兼容极旧环境，可先简单清洗：
，再加前缀使用
对 class 名同理：不要直接
，改用
用属性选择器替代 ID/Class 选择（更鲁棒）
ID 或 class 含特殊字符时，
或
容易失败；而属性选择器天然支持任意值，且语义清晰、容错强。
代替
→
代替
→
（
匹配单词边界）
注意：属性值必须加引号，且严格等于；可用
属性作为首选目标，它们本就设计为承载任意内容
封装安全查询函数，自动 fallback 和日志
不依赖裸调
，统一走封装层，把“找不到”和“语法错”都收口处理。
php版微信js-sdk支付接口类
php版微信js-sdk支付接口类
下载
立即学习
“
前端免费学习笔记（深入）
”；
示例封装：
调用时无需
，也不会因语法错误中断主线程
可进一步扩展：传入备用选择器数组，逐个尝试直到命中
开发期用 IDE 和 Lint 提前拦截
错误越早暴露，修复成本越低。靠人眼检查字符串太不可靠。
VS Code 安装插件如
CSS Peek
或
Auto Rename Tag
，能高亮识别非法选择器并提示
ESLint 配合
或自定义规则，对字面量字符串中疑似选择器的变量做静态扫描（例如匹配
后检查是否含未转义字符）
提交前跑一次
，把带冒号、空格、引号的裸字符串标为高风险项
querySelectorCSS.escape()const id = "user:login-2026";
document.querySelector(`#${CSS.escape(id)}`);id.replace(/[^a-zA-Z0-9-_]/g, '_')`.${rawClass}``.${CSS.escape(rawClass)}`#xxx.xxxquerySelector('#123abc')querySelector('[id="123abc"]')querySelector('.btn-primary:active')querySelector('[class~="btn-primary"]')~=`data-* querySelectorfunction safeQuery(sel, root = document) {
try {
const el = root.querySelector(sel);
if (!el) console.warn(`? safeQuery: "${sel}" returned null`);
return el;
} catch (e) {
console.error(`❌ safeQuery: invalid selector "${sel}"`, e);
return null;
}
}try/catcheslint-plugin-jsx-a11y/querySelector\(.+\)/npm run lint