我可以有一个 ID 以数字开头的元素吗？

Posted 2023-03-05

【中文标题】我可以有一个 ID 以数字开头的元素吗？

【英文标题】：Can I have an element with an ID that starts with a number?

【发布时间】：2011-08-06 02:03:33

【问题描述】：

我可以有一个id 以数字开头或完全是数字的元素吗？

例如像这样：

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

【问题讨论】：

它可能在某些浏览器中有效，至少在IE8和FF3.5中有效，但如前所述，ID以字母开头。 jsfiddle.net/LncAc

是的，你可以（从 html5 开始）。这是一个简短而完整的答案：***.com/a/31773673/3597276

What are valid values for the id attribute in HTML?的可能重复

【参考方案1】：

我可以有一个 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 选择器一起使用，以字母开头会更简单。

为清楚起见，列表中的这些链接：

HTML5 - The ID Attribute HTML4 - The ID Attribute 和 ID and NAME tokens CSS 2.1 rules for IDs

以下是使用div 和id“12”的示例，并以三种方式使用它：

使用 CSS 通过 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>&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 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 这样的选择器很难阅读。

【讨论】：

只是补充——仅仅因为你可以做某事并不意味着你应该。 HTML5 是否摆脱了限制并不重要，程序员不以数字开头的方法、函数或任何东西是相当标准的——那么为什么要更改标记语言呢？坚持你已经做的:)

顺便说一句，很抱歉，这是我的 HTML5 问题之一。对于它添加的每一个很棒的功能，它都会破坏我们在 HTML/XHTML 中已经习以为常的验证和规则，这可能是人们现在遇到这么多问题的原因，你知道吗？

@Zarazthuztra：显然在这种情况下，这只是现实的反映。浏览器已经允许除空格以外的任何内容，因此他们将其编码。

@T.J.Crowder 我同意你的观点，但是 HTML5 的采用如此分散，好吧，至少当被问到这个问题时，它只是给人们带来了一堆问题，明白我的意思吗？哦，好吧，无论如何，HTML5 ftw :)

@fay：同意。 如果您不打算对元素使用 CSS 选择器，那么没有特别好的理由不使用全数字 id。我改写了一下 A) 更清楚，B) 少说教。

【参考方案2】：

来自HTML 5 specs...

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

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

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

元素的唯一标识符可用于多种用途， 最值得注意的是作为链接到文档特定部分的一种方式 片段标识符，作为脚本时定位元素的一种方式， 并作为一种从 CSS 中为特定元素设置样式的方法。

标识符是不透明的字符串。特定的含义不应该 派生自 id 属性的值。

所以...是的:)

来自HTML 4.01 specs...

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

所以...不:(

【参考方案3】：

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

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

【参考方案4】：

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

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

【讨论】：

投反对票 关心解释？对不起，但这个答案的任何部分都没有错误。这是基于其他人所说的协议和建议。

我并没有反对，但我想观察一下，对于大量的 id，这种方法会导致很多本质上毫无价值的膨胀。还有就是每次引用一个id，都需要解析出来，拆分出phoneNumber_位，得到真实的id。此外，ID 并不具有语义意义，它们只是为了具有唯一性。

我在一定程度上同意。这是一个可以提供帮助的可读性项目。总的来说，这仍然是一个坏主意。需要重新考虑

【参考方案5】：

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

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。

同样的问题已经问过了

What are valid values for the id attribute in HTML?

【讨论】：

“jQuery 的 id 包含句点和冒号有问题” 是吗？在过去几年的版本中？什么样的问题？任何不是用户错误的吗？链接：Using IDs with dots and colons in the FAQ、example 不管怎样，您仍然对与不完善的工具的兼容性提出了很好的意见。

【参考方案6】：

虽然 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";

正确显示播放时髦的音乐

【参考方案7】：

不，根据经验，它必须以字母开头。如果您愿意，可以在第一个字符是字母之后使用数字。

【参考方案8】：

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

【讨论】：

这个答案在 HTML5 中是不正确的。 ***.com/a/31773673/3597276