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

Question

我能否拥有一个 id 以数字开头或完全是数字的元素？

例如像这样:

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

Answer 1

Can I have a div with id as number?

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

id 仅由数字组成的值 are perfectly valid in HTML ;除了空格之外的任何东西都可以。尽管早期的 HTML 规范更加严格(ref、ref)，需要一小组字符并以字母开头，但浏览器从不关心，这是 HTML5 规范开放的重要原因。

如果您打算将这些 id 与 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

下面是一个使用 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
• 火狐 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 这样的选择器很难读懂。