为何缺失闭合方括号的JavaScript属性查询选择器仍有效？

这种现象和JavaScript本身无关，核心原因是浏览器及部分库的CSS选择器解析器自带容错兼容机制，而非所谓的“近似语法”。

具体细节： #

• 浏览器原生环境（含Puppeteer）：现代浏览器的CSS解析引擎为了兼容历史上不规范的代码，会自动修复语法不完整的选择器。比如遇到[id='content'这种缺失闭合方括号的写法，引擎会自动补全为符合规范的[id='content']；带大小写不敏感标识的[id='CONTENT' i也会被补全为[id='CONTENT' i]，因此能正常匹配元素。
• jQuery支持：jQuery内部的选择器解析逻辑同样加入了这类容错处理，所以也能识别这种不完整的属性选择器。
• Cheerio不支持：Cheerio的选择器实现更严格遵循CSS规范，没有做容错兼容，因此会判定这类缺失闭合方括号的选择器为无效语法，无法匹配元素。

示例代码验证： #

JavaScript代码

// 选择目标元素
const t1 = document.querySelector("[id='content'")
console.log("t1", t1)

// 大小写不敏感查询
const t2 = document.querySelector("[id='CONTENT' i")
console.log("t2", t2)

HTML结构

<div id="content">Javascript attribute query selector</div>

内容的提问来源于stack exchange，提问作者Metro Smurf