为什么元素 id 不能以整数开头？ [复制]答案

【问题标题】：Why can an element id not start with an integer? [duplicate]为什么元素 id 不能以整数开头？ [复制]
【发布时间】：2014-04-04 04:22:14
【问题描述】：

我正在学习 jQuery 选择器。

w3schools tutorial 说“不要以数字开头的 id 属性。这可能会导致某些浏览器出现问题”。我测试并看到它确实不起作用。我想知道这个问题的技术原因是什么？

【问题讨论】：

我宁愿说不要开始从 W3Schools 学习 Web 开发
请查看w3fools 关于 w3schools。但就主题而言，这不是 jQuery 规则，而是由 CSS/HTML 标准驱动的规则。如果您正在寻找有关 CSS 或 JavaScript 的任何信息，那里有大量资源！= w3schools。 CSS MDN 是一个好的开始，他们获得了 JavaScript、HTML 等文档以及实际的 W3 文档，但有时它们可能难以阅读。

标签： javascript jquery

【解决方案1】：

为什么元素id不能以整数开头？

他们可以。但是 CSS ID 选择器不能以数字开头。例如，这个 HTML is valid:

<div id="1foo">testing 1 2 3</div>

...但是这个 CSS 无效有效：

#1foo {
    color: green;
}

CSS standard 表示 id 选择器不能以非转义数字开头：

ID 选择器包含一个“数字符号”（U+0023，#）紧跟 ID 值，该值必须是 CSS 标识符。

然后defining CSS identifier：

在 CSS 中，标识符（包括选择器中的元素名称、类和 ID）只能包含字符 [a-zA-Z0-9] 和 ISO 10646 字符 U+00A0 及更高，加上连字符 (-) 和下划线 (@ 987654332@); 它们不能以数字开头、两个连字符或一个连字符后跟一个数字。标识符还可以包含转义字符和任何 ISO 10646 字符作为数字代码（请参阅下一项）。例如，标识符"B&W?" 可以写为"B\&W\?" 或"B\26 W\3F"。

（我的重点。）

所以理论上，您可以通过转义 CSS 选择器中的数字来解决 #1foo 不起作用的问题。例如：

HTML：

<div id="1foo">testing 1 2 3</div>

CSS：

#\31 foo {
    color: green;
}

...其中31 是"1" 的十六进制字符代码。实例：

#\31 foo {
  color: green;
}

&lt;div id="1foo"&gt;testing 1 2 3&lt;/div&gt;

但是选择器不能从字面上以数字开头，而且总的来说，我会避免打扰这样的麻烦。我也无法说明在执行此操作时需要解释 CSS 选择器的各种事情的效果如何。 jQuery 正确处理它，FWIW。例如：

$("#\\31 foo").css("color", "blue");

...有效。实例：

setTimeout(function() {
  $("#\\31 foo").css("color", "blue");
}, 2000);

#\31 foo {
  color: green;
}

<div id="1foo">testing 1 2 3, this should be green, and in two seconds it'll turn blue</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

（请注意，您必须对字符串中的反斜杠进行转义，因为反斜杠在 JavaScript 字符串中是特殊的，因此要在选择器中获得实际的反斜杠，您需要在字符串中添加两个。）

至于为什么 CSS 会有这个限制（以及为什么 HTML used to，虽然浏览器从未强制执行），我们只能推测。 Alien 先生在 cmets 中指出，大多数编程语言不允许以数字开头的标识符。 HTML 和 CSS 当然不是编程语言，但通过 HTML 创建的 id 值反映为 DOM 对象中的属性名称，可以通过编程语言访问。可能只是制定规范的人遵循他们认为的惯例或试图提供与编程语言的一些兼容性。不过，这只是猜测。

【讨论】：

不仅仅是 CSS，它是一个标准..
我指的是 JavaScript，所以我使用了标准这个词。此外，问题中没有包含 CSS。所以我推送了该评论 :) 这是许多语言中的标准规则
@TJCrowder 我的理解是 CSS（至少从 2 开始）可以处理以数字开头的 ID 或类名，提供 i> 数字被转义。（即是对规则解析规则的限制，不是底层业务规则。）
@user2864740 是的，就像this
HTML5 除外，其中数字 ID 非常好

【解决方案2】：

实际上，您可以让 id 以数字开头，而像 document.getElementById 这样的方法可以很好地处理它。

但一些较旧的页面使用像元素这样的旧版 IE 标准

<div id="hello">World</div>

可以引用为document.hello。这个语法当然行不通，不过我觉得document["123id"] 可以解决。

但是，最重要的是，CSS 选择器不适用于以数字开头的 id。你必须逃脱他们：

#123id {color: red;}      /* It doesn't work */

#\31 23id {color: blue;}  /* Oh yeah! */

值得努力吗？应该不会吧。

【讨论】：