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

Question

<分区>

Answer 1

Why can an element id not start with an integer?

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

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

...但此 CSS 无效:

#1foo {
    color: green;
}

CSS standard表示 id 选择器不能以未转义的数字开头:

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

然后 defining CSS identifier :

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".

(我的重点。)

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

HTML:

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

CSS:

#\31 foo {
    color: green;
}

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

#\31 foo {
  color: green;
}

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

但是选择器不能从字面上以数字开头，一般来说，这是一个我会避免打扰的麻烦。我也不能说在执行此操作时需要解释 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 先生在评论中指出，大多数编程语言不允许以数字作为起始标识符。 HTML 和 CSS 当然不是编程语言，但是通过 HTML 创建的 id 值反射(reflect)为 DOM 对象中的属性名称，可以通过编程语言访问。可能只是制定规范的人遵循了他们认为的惯例，或者试图提供与编程语言的某种兼容性。不过，这只是猜测。