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

为什么元素id无法启动有一个整数？

Why can an element id not start with an integer?

他们可以。但是CSS ID选择器不能以数字开头。例如，此HTML 有效：

They can. But a CSS ID selector cannot start with a digit. E.g., this HTML is valid:

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

...但此CSS 不有效：

...but this CSS is not valid:

#1foo {
    color: green;
}

CSS标准表示 id 选择器不能以数字开头：

The CSS standard says that an id selector cannot start with a digit:

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

An ID selector contains a "number sign" (U+0023, #) immediately followed by the ID value, which must be an CSS identifiers.

然后定义CSS标识符：

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

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F".

（我的重点。）

所以从理论上讲，你可以解决＃1foo 无法通过转义CSS选择器中的数字来工作。例如：

So in theory, you can work around the #1foo not working by escaping the digit in the CSS selector. For instance:

HTML：

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

CSS：

#\31 foo {
    color: green;
}

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

...where 31 is the character code for "1" in hex. Live Example:

#\31 foo {
  color: green;
}

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

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

But the selector can't literally start with a digit, and in general it's such a hassle I would avoid bothering. I also can't speak to how well the various things that need to interpret CSS selectors work when doing this. jQuery handles it correctly, FWIW. E.g.:

$("#\\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字符串中是特殊的，所以要实现选择器中的反斜杠，你需要两个字符串。）

(Note that you have to escape the backslash in the string, because backslashes are special in JavaScript strings, so to get an actual backslash in the selector, you need two in the string.)

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

As for why CSS would have this restriction (and why HTML used to, although browsers never enforced it), we can only speculate. Mr. Alien points out in the comments that most programming languages disallow starting identifiers with a digit. HTML and CSS are not, of course, programming languages, but the id values created via HTML are reflected as property names in DOM objects, which are accessed via programming languages. It may just be that the people doing the specs were following what they felt was convention or trying to provide some compatibility with programming languages. That's speculation, though.