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

Question

我正在学习jQuery选择器.

w3schools 教程说"不要用数字启动id属性.它可能会在某些浏览器中引起问题".我测试过,发现它确实不起作用.我想知道这个问题的技术原因是什么？

Answer 1

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

他们能.但是CSS ID选择器不能以数字开头.例如,此HTML 有效:

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

...但是这CSS是不合法的:

#1foo {
    color: green;
}

在CSS标准说,一个id选择器不能以数字开头:

ID选择器包含一个"数字符号"(U + 0023,#),后面紧跟ID值,该值必须是CSS标识符.

然后定义CSS标识符:

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

(我的重点.)

所以从理论上讲,你可以#1foo通过转义CSS选择器中的数字来解决不工作问题.例如:

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 习惯了,虽然浏览器从未强制执行),我们只能推测.Alien先生在评论中指出,大多数编程语言都不允许用数字开始标识符.HTML和CSS当然不是编程语言,但是id通过HTML创建的值反映为DOM对象中的属性名称,可以通过编程语言访问.可能只是那些做规范的人正在遵循他们认为的惯例,或试图提供与编程语言的一些兼容性.不过这是猜测.