我可以有一个 ID 以数字开头的元素吗? [英] Can I have an element with an ID that starts with a number?

问题描述

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

Can I have an element that has an id that starts with or is completely numbers?

例如像这样:

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

推荐答案

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

Can I have a div with id as number?

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

Yes you can, but selecting/styling it with a CSS selector will be a pain.

id 值仅由数字组成 在 HTML 中完全有效;除了空间之外的任何东西都可以.尽管早期的 HTML 规范更加严格(ref, ref)，需要一小组字符并开始有一个字母，浏览器从不关心，这也是 HTML5 规范开放的重要原因.

id values that consist solely of digits are perfectly valid in HTML; anything but a space is okay. And although earlier HTML specs were more restrictive (ref, ref), requiring a small set of chars and starting with a letter, browsers never cared, which is a big part of why the HTML5 specification opens things up.

如果您打算将这些 id 与 CSS 选择器一起使用(例如，使用 CSS 设置样式，或使用 querySelector 定位它们, querySelectorAll 或像 jQuery 这样使用 CSS 选择器的库)，请注意这可能会很痛苦，最好用字母盯着 id，因为 你不能使用 id 从 CSS id 选择器 literally 中的数字开始；你必须逃避它.(例如，#12 是一个无效的 CSS 选择器；您必须将它写为 #3132.)因此，以字母开头更简单如果你打算将它与 CSS 选择器一起使用.

If you're going to use those ids with CSS selectors (e.g, style them with CSS, or locate them with querySelector, querySelectorAll, or a library like jQuery that uses CSS selectors), be aware that it can be a pain and you're probably better off staring the id with a letter, because you can't use an id starting with a digit in a CSS id selector literally; you have to escape it. (For instance, #12 is an invalid CSS selector; you have to write it #3132.) For that reason, it's simpler to start it with a letter if you're going to use it with CSS selectors.

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

Those links above in a list for clarity:

• HTML5 - ID 属性
• HTML4 - ID 属性 和 ID 和 NAME 令牌
• ID 的 CSS 2.1 规则李>

以下是使用 div 和 id 12"的示例.并以三种方式使用它:

Below is an example using a div with the id "12" and doing things with it three ways:

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

1. With CSS
2. With JavaScript via document.getElementById
3. With JavaScript via document.querySelector (on browsers that support it)

它适用于我曾经使用过的所有浏览器(参见代码下方的列表).实例:

It works on every browser I've ever thrown at it (see list below the code). Live Example:

"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);
}

#3132 {
    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>#3132 {
    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>

我从未在浏览器中看到上述失败.这是我见过的浏览器的子集:

I've never seen the above fail in a browser. Here's a subset of the browsers I've seen it work in:

• Chrome 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 选择器，最好以字母开头；#3132 之类的选择器很难阅读.

But again: If you're going to use CSS selectors with the element, it's probably best to start it with a letter; selectors like #3132 are pretty tricky to read.

这篇关于我可以有一个 ID 以数字开头的元素吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！