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

是的你可以。

id仅由数字组成的值在 HTML 中完全有效；除了一个空间什么都可以。尽管早期的 HTML 规范更加严格（ref、ref），需要一小组字符并以字母开头，但浏览器从不关心，这也是 HTML5 规范开放的重要原因。

如果你要使用这些ids的CSS选择器（例如，风格他们CSS，或找到他们querySelector，querySelectorAll或者像jQuery库，它使用CSS选择器），要知道，它可以是一个痛苦的，因为你可以”吨使用id与在CSS的一个数字的起始id选择字面上; 你必须逃避它。（例如，#12是一个无效的 CSS 选择器；您必须编写它#\31\32。）因此，如果您打算将它与 CSS 选择器一起使用，以字母开头会更简单。

为清楚起见，以上列表中的链接：

• HTML5 - ID 属性
• HTML4 - ID 属性以及ID 和 NAME 标记
• ID 的 CSS 2.1 规则

下面是一个使用div带有id“12”并用它做事的三种方式的例子：

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

它适用于我曾经使用过的所有浏览器（请参阅代码下方的列表）。现场示例：

(function() {
  "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>

我从未在浏览器中看到上述失败。这是我看到它在其中工作的浏览器的一个子集：

• 铬 26、34、39
• IE6、IE8、IE9、IE10、IE11
• 火狐 3.6、20、29
• IE10（移动）
• Safari iOS 3.1.2、iOS 7
• 安卓 2.3.6、4.2
• 歌剧 10.62, 12.15, 20
• 征服者 4.7.4

但同样：如果您要对元素使用 CSS 选择器，最好以字母开头；选择器之类#\31\32的阅读起来非常棘手。

从HTML 5 规范...

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

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

对于 ID 可以采用的形式没有其他限制；特别是，ID 可以仅包含数字、以数字开头、以下划线开头、仅包含标点符号等。

元素的唯一标识符可用于多种目的，最显着的是作为使用片段标识符链接到文档特定部分的一种方式，作为在编写脚本时定位元素的一种方式，以及作为一种从CSS。

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

所以......是的:)

从HTML 4.01 规范...

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

所以不行 ：（

您还可以通过执行以下操作来选择该类型的 id（尽管创建以数字开头的 id 绝对不是最佳实践）：

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

从可维护性的角度来看，这是一个坏主意。ID 至少应该对它们所代表的内容有所描述。给它加上一些有意义的前缀，以符合其他人已经回答的问题。例如：

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

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

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（小写 'f'）中输入 id="firstName" 并在 CSS 中输入 .FirstName { color: red }（大写 'F'），则有问题的浏览器将不会设置元素的颜色为红色。因为两个定义都使用有效字符作为 ID，所以您不会收到来自验证工具的错误。

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

同样的问题已经问了

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