我可以使用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?

是的.

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.

如果，您将通过CSS选择器使用这些id(例如，使用CSS设置样式，或使用querySelector，querySelectorAll或jQuery之类的库来定位它们)使用CSS选择器)，请注意这可能会很麻烦，因为您不能在CSS id选择器字面上 中使用以数字开头的id；你必须逃避它. (例如，#12是无效的CSS选择器；您必须将其编写为#\31\32.)因此，如果要与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, 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 #\31\32.) 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和名称令牌
• 用于ID的CSS 2.1规则

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

以下是将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:

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

#\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>

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

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
• 歌剧10.62、12.15、20
• Konquerer 4.7.4

但是再说一次:如果，您将对元素使用CSS选择器，最好以字母开头；像#\31\32这样的选择器很难阅读.

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 #\31\32 are pretty tricky to read.

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