我可以为ID以数字开头的元素吗？

Question

我能否创建一个具有以数字开头或完全为数字的 id 属性的元素？

例如这样的：

<div id="12"></div>

- jslearner

---

它可能在某些浏览器中工作，至少在IE8和FF3.5中工作，但是如上所述，请以字母开头的ID。http://jsfiddle.net/LncAc/ - amit_g

可以的（自HTML5起）。这是一个简短而完整的答案：https://dev59.com/83VD5IYBdhLWcg3wJIEK#31773673 - Michael Benjamin

可能是重复的问题：HTML中id属性的有效值是什么？ - user

Answer 1

我可以拥有一个ID为数字的div吗？

可以，但是用CSS选择器选择/样式化它会很麻烦。

id 值如果仅由数字组成，在 HTML 中是完全有效的；除了空格以外的任何字符都可以。尽管早期的 HTML 规范更加严格（规范1，规范2），要求使用一小组字符并以字母开头，但浏览器从来没有在意过，这也是 HTML5 规范放开限制的重要原因之一。

如果你要使用这些 id 与 CSS 选择器配合使用（例如，用 CSS 对其进行样式化，或者使用 querySelector、querySelectorAll 或像 jQuery 这样使用 CSS 选择器的库来定位它们），请注意会很麻烦，如果可能最好以字母开头，因为你不能直接在 CSS id 选择器中使用以数字开头的 id（需要进行转义）。（例如，#12 是无效的 CSS 选择器；必须写成 #\31\32）。因此，如果您将与 CSS 选择器一起使用它，最好从字母开始。

以上链接按清晰度列出：

• HTML5 - ID属性
• HTML4 - ID属性 和 ID和NAME令牌
• CSS 2.1 - ID规则

下面是一个使用 id 为“12”的 div 并用三种方式处理它的示例：

1. 使用 CSS
2. 通过 document.getElementById 使用 JavaScript
3. 通过 document.querySelector（适用于支持它的浏览器）使用 JavaScript

它可以在我测试过的所有浏览器上运行（请参见代码下方的列表）。实时示例：

"use strict";

document.getElementById("12").style.border = "2px solid black";
if (document.querySelector) {
    document.querySelector("#\\31\\32").style.fontStyle = "italic";
    display("The font style is set using JavaScript with <code>document.querySelector</code>:");
    display("document.querySelector(\"#\\\\31\\\\32\").style.fontStyle = \"italic\";", "pre");
} else {
    display("(This browser doesn't support <code>document.querySelector</code>, so we couldn't try that.)");
}

function display(msg, tag) {
    var elm = document.createElement(tag || 'p');
    elm.innerHTML = String(msg);
    document.body.appendChild(elm);
}

#\31\32 {
    background: #0bf;
}
pre {
    border: 1px solid #aaa;
    background: #eee;
}

<div id="12">This div is: <code>&lt;div id="12">...&lt;/div></code>
</div>
<p>In the above:</p>
<p>The background is set using CSS:</p>
<pre>#\31\32 {
    background: #0bf;
}</pre>
<p>(31 is the character code for 1 in hex; 32 is the character code for 2 in hex. You introduce those hex character sequences with the backslash, <a href="http://www.w3.org/TR/CSS21/syndata.html#value-def-identifier">see the CSS spec</a>.)</p>
<p>The border is set from JavaScript using <code>document.getElementById</code>:</p>
<pre>document.getElementById("12").style.border = "2px solid black";</pre>

我从未见过上述方法在浏览器中失败。以下是我见过它可用的部分浏览器列表：

• Chrome 26、34、39
• IE6、IE8、IE9、IE10、IE11
• Firefox 3.6、20、29
• IE10（移动版）
• Safari iOS 3.1.2、iOS 7
• Android 2.3.6、4.2
• Opera 10.62、12.15、20
• Konquerer 4.7.4

但要注意：如果您将使用CSS选择器与该元素一起使用，最好以字母开头；像#\31\32这样的选择器很难阅读。

- T.J. Crowder

---

补充一点：仅仅因为你“可以”做某件事并不意味着你“应该”这样做。即使HTML5取消了此限制，但在程序员中间以使用数字开头的方法、函数或任何内容是相当标准的，那么为什么要改变这个标记语言呢？坚持你已经在做的事情就好 :) - Jimbo

只是顺便提一下，很抱歉打扰了，这是我对HTML5的一个问题之一。尽管它增加了许多令人惊叹的功能，但也破坏了我们在HTML / XHTML中习惯的验证和规则，这可能是为什么现在人们遇到这么多问题的原因，你知道吗？ - Zarathuztra

@T.J.Crowder 我同意你的观点，但是由于HTML5的采用率如此分散，至少在这个问题被提出时，它只会给人们带来一堆问题，你知道我的意思吗？不过，无论如何，HTML5仍然是最好的选择 :) - Zarathuztra

我认为我们不允许使用以数字字符开头的div ID......http://www.w3.org/TR/html4/types.html#type-name - Hitesh

@fay：同意。如果您不打算使用CSS选择器与元素配合使用，那么没有什么特别好的理由不使用全数字的id。我稍微重新表述了一下，以便A）更加清晰，B）不那么教条主义。 - T.J. Crowder

Answer 2

从HTML 5规范中...

id属性指定元素的唯一标识符(ID)。[DOM]

该值在元素所在的主子树中必须是唯一的，且必须至少包含一个字符。该值不能包含任何空格字符。

对ID可以采取任何形式，特别是ID可以仅由数字组成，以数字开头，以下划线开头，仅由标点符号组成等等。

元素的唯一标识符可用于多种目的，最重要的是作为使用片段标识符链接文档特定部分的方法，作为脚本时针对元素的方法以及作为CSS样式化特定元素的方法。

标识符是不透明的字符串。不应从id属性的值中得出特定含义。

因此... 是的 :)

从HTML 4.01规范中...

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

所以...不行 :(

- Hristo

Answer 3

您也可以通过以下方式选择此类id（尽管创建以数字开头的id绝对不是最佳实践）：

document.querySelector('div[id="12"]'); //or 
document.querySelectorAll('div[id="12"]'); //if you have multiple elements with equal ID.

- dre.dev

Answer 4

从可维护性的角度来看，这是一个不好的想法。ID应该至少在一定程度上描述它们所代表的内容。请在前面加上一些有意义的前缀，以便符合其他人已经给出的答案。例如：

<div id ="phoneNumber_12" > </div>

- Zarathuztra

---

踩个负评能解释一下吗？抱歉，但这个答案中没有任何错误。它是基于其他人所说的协议和建议。 - Zarathuztra

我没有给你点“踩”的意思，但我觉得需要指出的是，当处理大量ID时，这种方法会导致很多无用的冗余代码。此外，每次引用一个ID时，都需要解析以分离phoneNumber_部分并获取真实的ID。另外，ID没有语义含义，它们只是唯一的标识符。 - Pancho

在某种程度上我同意。这是一个可以帮助提高可读性的项目。总体来说，这仍然是一个不好的想法。需要重新考虑。 - Zarathuztra

Answer 5

TJ Crowder的答案在概念上是好的，但对于后代CSS选择器却不起作用。

然而，仅转义后跟空格的第一个字符确实有效（在Chrome 49中）

假设以下HTML片段：

<td id="123456">
 <div class="blah">
  <div class="yadah">play that funky music</div>
 </div>
</td>

以下语句：

document.querySelector("#\\31 23456 .blah .yadah").style.fontStyle = "italic";

正确显示播放那首时髦的音乐

- Pancho

Answer 6

正如其他回答所指出的那样，从技术上讲，答案是：

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

然而，实际上，如果您希望您的文档能够与各种浏览器、CSS编辑器和JavaScript框架一起使用，那么您将受到一定限制。

正如其他回答中所指出的那样，jQuery在包含句点和冒号的id方面存在问题。

更微妙的问题是，一些浏览器会错误地将id属性值视为区分大小写。这意味着，如果您在HTML中键入id="firstName"（小写'f'），并在CSS中键入.FirstName { color: red }（大写'F'），有些有缺陷的浏览器将不会将元素的颜色设置为红色。因为两个定义都使用了id的有效字符，所以您将不会从验证工具中收到任何错误信息。

您可以通过严格遵守命名约定来避免这些问题。例如，如果您完全限制自己只使用小写字符，并始终使用连字符或下划线分隔单词（但不要同时使用两者，选择其中一个并永远不要使用另一个），那么您就有了一个易于记忆的模式。您永远不会想知道“是firstName还是FirstName？”因为您总是知道应该键入first_name。

同样的问题已经被问过了

HTML中id属性的有效值是什么？

- Anand Thangappan

---

"jQuery在处理包含句点和冒号的ID时存在问题"。在过去几年的发布中有这个问题吗？有什么样的问题？是否有任何不是用户错误的问题？链接：在FAQ中使用带有点和冒号的ID，示例。无论如何，您提出了一个关于与不完美工具兼容性的好观点。 - T.J. Crowder

Answer 7

不可以，根据经验，变量名必须以字母开头。你可以在第一个字符是字母的情况下使用数字。

- Gabriel Alfaro

Answer 8

不行，必须以字母开头。请参见http://www.electrictoolbox.com/valid-characters-html-id-attribute/。但是在第一个字符后面可以使用数字，例如a1或theansweris42。

- Rafe Kettler

---

这个答案在HTML5中已经不正确了。https://dev59.com/83VD5IYBdhLWcg3wJIEK#31773673 - Michael Benjamin