为什么我的 CSS 选择器无效？ [复制]答案

【问题标题】：Why is my CSS selector invalid? [duplicate]为什么我的 CSS 选择器无效？ [复制]
【发布时间】：2018-12-26 00:40:14
【问题描述】：

我正在尝试使用以下数据库 ID 作为选择器

5b4bb7d2685cfb094b1d46c3

sn-p如下：

document.querySelector('#5b4bb7d2685cfb094b1d46c3')

&lt;button id="5b4bb7d2685cfb094b1d46c3"&gt;

当我尝试选择器时，我收到以下错误：

Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '#5b4bb7d2685cfb094b1d46c3' is not a valid selector.

我的选择器出了什么问题？

【问题讨论】：

【解决方案1】：

虽然这在 HTML 中有效，但您不能在 CSS 选择器中使用以整数开头的 ID。您可以改用属性选择器：

document.querySelector("[id='5b4bb7d2685cfb094b1d46c3']")

如果可以的话，也可以改用getElementById：

document.getElementById("5b4bb7d2685cfb094b1d46c3")

【讨论】：

我试过这个，我仍然得到： Failed to execute 'querySelector' on 'Document': '[id=5b4bb7d2685cfb094b1d46c3]' is not a valid selector.
@Hoa 尝试更新的代码，我忘了引用属性值:)
谢谢 - 非常感谢！

【解决方案2】：

你也可以使用document.getElementById('5b4bb7d2685cfb094b1d46c3')

【讨论】：

【解决方案3】：

ID 可以以数字开头，但querySelector 必须遵循CSS 标准。

在 CSS 中，标识符（包括元素名称、类和 ID）选择器）只能包含字符 [a-zA-Z0-9] 和 ISO 10646 字符 U+00A0 及更高，加上连字符 (-) 和下划线 (_);它们不能以数字、两个连字符或后面的连字符开头一个数字。

请改用document.getElementById("5b4bb7d2685cfb094b1d46c3")。

参考：

【讨论】：

【解决方案4】：

QuerySelector 方法使用 CSS3 选择器来查询 DOM，而 CSS3 不支持以数字开头的 ID 选择器。

【讨论】：