为什么'.tab-content[data-tab=1]'在原生JS中不是合法选择器但jQuery中可用？

问题原因说明 #

这个差异是原生选择器的严格规范校验和jQuery选择器引擎的额外容错机制导致的，具体规则如下：

• CSS官方规范中，属性选择器的属性值只有是合法CSS标识符时才能省略引号。CSS标识符的要求是：只能由字母、数字、下划线、连字符组成，且不能以数字、「连字符+数字」开头。
  你代码里的属性值1是纯数字，不符合CSS标识符的定义，所以必须用单/双引号包裹才属于合法选择器，原生querySelector严格遵循W3C规范做合法性校验，不符合要求的选择器会直接抛出DOMException错误。
• 你查阅到的[target=_blank]示例是合法可省略引号的场景：_blank以下划线开头，属于符合要求的CSS标识符，就算不加引号原生querySelector也可以正常识别。
• jQuery可以正常运行的原因是其内置的Sizzle选择器引擎没有完全严格执行CSS规范的校验逻辑，针对纯数字属性值这类常见的不规范写法做了兼容适配，自动完成了识别转换，所以不需要加引号也能正常匹配到元素。

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