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

问题描述

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

例如像这样:

解决方案

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

是的，你可以.

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

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

为清楚起见，以上列表中的链接:

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

下面是一个使用 div 和 id "12" 并用它做事的三个例子:

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

它适用于我曾经使用过的所有浏览器(请参阅代码下方的列表).现场示例:

(function() {严格使用"；document.getElementById("12").style.border = "2px 纯黑";如果(document.querySelector){document.querySelector("#\31\32").style.fontStyle = "italic";display("字体样式是使用 JavaScript 设置的，带有 document.querySelector:");display("document.querySelector("#\\31\\32").style.fontStyle = "italic";", "pre");} 别的 {display("(此浏览器不支持document.querySelector，所以我们无法尝试.)");}功能显示(味精，标签){var elm = document.createElement(tag || 'p');elm.innerHTML = String(msg);document.body.appendChild(elm);}})();

#3132 {背景:#0bf；}预{边框:1px 实心 #aaa;背景:#eee;}

<div id="12">这个div是:<code>&lt;div id="12">;...&lt;/div></code>

<p>在上面:</p><p>使用 CSS 设置背景:</p><预>#3132 {背景:#0bf；}

<p>(31 是 1 的十六进制字符代码；32 是十六进制 2 的字符代码.你用反斜杠介绍那些十六进制字符序列，<a href="http://www.w3.org/TR/CSS21/syndata.html#value-def-identifier">请参阅 CSS 规范</a>.)</p><p>边框是使用<code>document.getElementById</code>:</p>从JavaScript设置的.<pre>document.getElementById("12").style.border = "2px 纯黑";</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
• 歌剧 10.62、12.15、20
• 霸王 4.7.4

但再次强调:如果您要对元素使用 CSS 选择器，最好以字母开头；像 #3132 这样的选择器很难阅读.

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

E.g. something like this:

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

解决方案

Can I have a div with id as number?

Yes, you can.

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.

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, 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 - The ID Attribute
• HTML4 - The ID Attribute and ID and NAME tokens
• CSS 2.1 rules for IDs

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

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:

(function() {
  "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 (Mobile)
• Safari iOS 3.1.2, iOS 7
• Android 2.3.6, 4.2
• Opera 10.62, 12.15, 20
• Konquerer 4.7.4

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屋！