将查询选择器与 ID 作为数字

javascript html css-selectors selectors-api

2022-08-30 04:21:35

据我所知，HTML5规范允许您使用像这样的数字ID。

<div id="1"></div>
<div id="2"></div>

我可以使用这些精细访问，但不能使用.如果我尝试执行以下操作，我会在控制台中获得语法错误：DOM异常12。getElementByIdquerySelector

document.querySelector("#1")

我只是好奇为什么当HTML5规范说这些数字有效时，使用数字作为ID不起作用。我尝试了多个浏览器。querySelector

答案 1

它是有效的，但需要一些特殊处理。从这里：http://mathiasbynens.be/notes/css-escapes

前导数字

如果标识符的第一个字符是数字，则需要根据其 Unicode 码位对其进行转义。例如，字符 1 的代码点是 U+0031，因此可以将其转义为 \000031 或 \31 。

基本上，要转义任何数字字符，只需在前面加上\3并附加一个空格字符（）。耶伊·尤尼码！

所以你的代码最终会变成（CSS第一，JS第二）：

#\31  {
    background: hotpink;
}

document.getElementById('1');
document.querySelector('#\\31 ');

答案 2

因为虽然它们在HTML5规范中有效，但它们在CSS中无效，这就是“查询选择器”的意思。

相反，你必须这样做：，这是非常冗长的，因为你可以给它一个有意义的ID，比如;)document.querySelector("[id='1']")message1