Question

我可以将 div id 作为号码吗？

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

Answer 1

我可以将ID为id的div吗？

是的，你可以。

id个值;除了空间之外什么也没关系。虽然早期的HTML规范更具限制性（ref，ref），需要一小组字符并以字母开头，浏览器从不关心，这是HTML5规范打开事物的重要原因起来。

如果，您将使用带有CSS选择器的id {（例如，使用CSS设置样式，或使用querySelector找到它们，querySelectorAll或者像jQuery一样使用CSS选择器的库），请注意它可能会很痛苦，因为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

下面是一个使用div id“12”的示例，并以三种方式处理它：

使用CSS
使用JavaScript document.getElementById
使用JavaScript document.querySelector（在支持它的浏览器上）

它适用于我曾经抛出的每个浏览器（请参阅代码下方的列表）。实例：

(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>

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

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选择器，最好用一个字母开始它;像#\31\32这样的选择器非常难以阅读。

Answer 2

来自HTML 5 specs ...

id属性指定其元素的唯一标识符（ID）。 [DOM]

该值必须在元素主页中的所有ID中唯一   子树，必须包含至少一个字符。价值不能   包含任何空格字符。

ID可以采取什么形式没有其他限制;在   特别是，ID可以只包含数字，以数字开头，开始   带下划线，仅包括标点符号等。

元素的唯一标识符可用于各种目的，   最值得注意的是使用链接到文档的特定部分的方法   片段标识符，作为在编写脚本时定位元素的方法，   并且作为一种从CSS设置特定元素的方式。

标识符是不透明的字符串。特殊含义不应该是   派生自id属性的值。

所以......是的：）

来自HTML 4.01 specs ...

ID必须以a开头信（[A-Za-z]），可以遵循任意数量的字母，数字（[0-9]），连字符（“ - ”），下划线（“_”），冒号（“：”）和句号（ “”）。

所以......不:(

Answer 3

从可维护性的角度来看，这是一个坏主意。 ID应至少在某种程度上描述它们代表的内容。用有意义的东西作为前缀，以符合其他人已经回答的内容。例如：

<div id ="phoneNumber_12" > </div>

Answer 4

您还可以通过执行以下操作来选择该类型的ID（尽管创建这样一个以数字开头的ID绝对不是最佳做法）：

document.querySelector('div[id="12"]'); //or 
document.querySelectorAll('div[id="12"]'); //if you have multiple elements with equal ID.

Answer 5

正如其他回应中指出的那样，答案是技术上的：

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

但是，实际上，如果您希望文档可以与各种浏览器，CSS编辑器和JavaScript框架一起使用，那么您将受到更多限制。

正如其他回复中所述，jQuery存在包含句点和冒号的ID的问题。

一个更微妙的问题是，已知某些浏览器会错误地将id属性值视为区分大小写。这意味着如果你在你的CSS中输入id =“firstName”（小写'f'）和你的CSS中的.FirstName {color：red}（大写的'F'），那么一个错误的浏览器将不会设置元素的颜色为红色。由于两个定义都使用有效字符作为id，因此验证工具不会收到任何错误。

您可以通过严格遵守命名约定来避免这些问题。例如，如果您将自己完全限制为小写字符，并且始终使用连字符或下划线分隔单词（但不是两者，请选择一个而不使用另一个），那么您将拥有一个易于记忆的模式。你永远不会怀疑“它是firstName还是FirstName？”因为你总是知道你应该键入first_name。

同样的问题已经问过了

What are valid values for the id attribute in HTML?

Answer 6

虽然TJ Crowder的回答在概念上很好，但它对后代的CSS选择器并不起作用。

只转移第一个字符后跟空格确实有效（如在Chrome 49中）

假设以下HTML代码段：

<td id="123456">
 <div class="blah">
  <div class="yadah">play that funky music</div>
 </div>
</td>

以下声明：

document.querySelector("#\\31 23456 .blah .yadah").style.fontStyle = "italic";

正确显示播放那个时髦的音乐

Answer 7

不，根据经验，它必须以字母开头。如果您愿意，您可以在第一个字符之后使用数字。

Answer 8

没有。它必须以一封信开头。见http://www.electrictoolbox.com/valid-characters-html-id-attribute/。但是，您可以在第一个字符后使用数字，例如a1或theansweris42。

我可以将id作为数字的div吗？

8 个答案: