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

Question

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

例如这样的事情：

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

原文由 jslearner 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

是的，您可以， 但是使用 CSS 选择器选择/设置样式会很痛苦。

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

如果 您打算将这些 id 与 CSS 选择器一起使用（例如，使用 CSS 设置它们的样式，或使用 querySelector , querySelectorAll ,library a6,就像使用 CSS 选择器的 jQuery 一样），请注意这可能会很痛苦，您最好不要用字母盯着 id ，因为 您不能使用 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 （在支持它的浏览器上）

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

 "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（手机）
• 苹果浏览器 iOS 3.1.2、iOS 7
• 安卓 2.3.6、4.2
• 歌剧 10.62、12.15、20
• 征服者4.7.4

但是再说一次： 如果 你要对元素使用 CSS 选择器，最好以字母开头；像 #\31\32 这样的选择器很难读懂。

原文由 T.J. Crowder 发布，翻译遵循 CC BY-SA 4.0 许可协议