为什么我的CSS选择器无效？

Question

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

5b4bb7d2685cfb094b1d46c3

代码段如下：

document.querySelector('#5b4bb7d2685cfb094b1d46c3')

<button id="5b4bb7d2685cfb094b1d46c3">

尝试选择器时，出现以下错误：

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

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

Answer 1

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

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

或者，如果可以的话，切换到使用getElementById：

document.getElementById("5b4bb7d2685cfb094b1d46c3")

Answer 2

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

Answer 3

您可以使用数字开头ID，但如果使用querySelector，则必须遵循CSS标准。

  

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

改为使用document.getElementById("5b4bb7d2685cfb094b1d46c3")。

参考：

Uncaught SyntaxError: Failed to execute 'querySelector' on 'Document'

Answer 4

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