我可以有一个id 以数字开头或完全是数字的元素吗？
例如像这样：
<div id="12"></div>
【问题讨论】：
标签： javascript html css css-selectors
我可以有一个 id 为数字的 div 吗？
是的，你可以，但是使用 CSS 选择器选择/设置样式会很痛苦。
id 值仅由数字 are perfectly valid in HTML 组成；除了空间之外的任何东西都可以。尽管早期的 HTML 规范更加严格（ref、ref），需要一小部分字符并以字母开头，但浏览器从不在乎，这也是 HTML5 规范开放的重要原因。
如果您打算将这些 ids 与 CSS 选择器一起使用（例如，使用 CSS 设置样式，或者使用 querySelector、querySelectorAll 或 jQuery 之类的库来定位它们使用 CSS 选择器），请注意这可能会很痛苦，您最好用字母盯着id，因为you can't use an id starting with a digit in a CSS id selector literally；你必须逃避它。 （例如，#12 是一个无效的 CSS 选择器；您必须写成 #\31\32。）因此，如果您打算将它与 CSS 选择器一起使用，以字母开头会更简单。
为清楚起见，列表中的这些链接：
以下是使用div 和id“12”的示例，并以三种方式使用它：
document.getElementById 使用 JavaScript
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><div id="12">...</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>我从未在浏览器中看到上述失败。这是我见过的浏览器的子集：
但同样：如果您要对元素使用 CSS 选择器，最好以字母开头；像#\31\32 这样的选择器很难阅读。
【讨论】：
id。我改写了一下 A) 更清楚，B) 少说教。
来自HTML 5 specs...
id 属性指定其元素的唯一标识符 (ID)。 [DOM]
该值在元素的 home 中的所有 ID 中必须是唯一的 子树，并且必须至少包含一个字符。该值不得 包含任何空格字符。
对于 ID 可以采用的形式没有其他限制；在 特别是，ID 可以只包含数字，以数字开头，开始 带下划线，仅包含标点符号等。
元素的唯一标识符可用于多种用途， 最值得注意的是作为链接到文档特定部分的一种方式 片段标识符，作为脚本时定位元素的一种方式， 并作为一种从 CSS 中为特定元素设置样式的方法。
标识符是不透明的字符串。特定的含义不应该 派生自 id 属性的值。
所以...是的:)
来自HTML 4.01 specs...
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 中输入 id="firstName"（小写“f”）并在 CSS（大写“F”）中输入 .FirstName { color: red }，错误的浏览器将不会设置元素的颜色为红色。因为这两个定义都使用有效的 id 字符，所以验证工具不会出现错误。
您可以通过严格遵守命名约定来避免这些问题。例如，如果您将自己完全限制为小写字符，并且总是用连字符或下划线分隔单词（但不能同时使用两者，选择一个，从不使用另一个），那么您就有一个易于记忆的模式。您永远不会想知道“是名字还是名字？”因为你总是知道你应该输入 first_name。
同样的问题已经问过了
【讨论】：
虽然 TJ Crowder 的答案在概念上很好，但它不适用于后代 CSS 选择器。
只转义第一个字符后跟空格确实有效（如在 Chrome 49 中）
假设以下 HTML sn-p：
<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";
正确显示播放时髦的音乐
【讨论】：
不，根据经验，它必须以字母开头。如果您愿意，可以在第一个字符是字母之后使用数字。
【讨论】：
没有。它必须以字母开头。见http://www.electrictoolbox.com/valid-characters-html-id-attribute/。但是，您可以在第一个字符之后使用数字，例如a1 或 theansweris42。
【讨论】：