Question

我正在学习jQuery选择器。

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

Answer 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及更高版本以及连字符（- ）和下划线（_）; 他们不能以数字，两个连字符或连字符后跟数字开头。标识符还可以包含转义字符和任何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;
}

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

但是选择器不能从字面上开始用数字，一般来说这是一个麻烦，我会避免打扰。我也无法说出在执行此操作时需要解释CSS选择器的各种事情的效果如何。 jQuery正确处理它，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字符串中是特殊的，因此要在选择器中获得实际的反斜杠，您需要在字符串中使用两个反斜杠。）

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

Answer 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! */

值得努力吗？可能不是。

Answer 3

来自HTML 4 specification：

ID和NAME令牌必须以字母（[A-Za-z]）开头，后面可以跟任意数量的字母，数字（[0-9]），连字符（“ - ”），下划线（“ _“），冒号（”：“）和句号（”。“）。

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

3 个答案: