我可以使用ID作为编号的div吗？

我能有一个div与id为数字？我可以使用ID作为编号的div吗？

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

2011-04-15 jslearner

它可能在某些浏览器，至少在IE8和FF3.5中工作，但如前所述，用一个字母开始ID。 http://jsfiddle.net/LncAc/ – 2011-04-15 06:07:09

是的，你可以（从HTML5开始）。下面是一个简短的完整答案：http://stackoverflow.com/a/31773673/3597276 – 2015-08-02 15:58:56

可能的重复[什么是HTML中的id属性的有效值？]（http://stackoverflow.com/questions/70579/ what-are-valid-values-for-the-id-attribute-in-html） – user 2016-05-19 17:44:53

-3

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

来源

2011-04-15 05:57:41

这个答案在HTML5中是不正确的。 http://stackoverflow.com/a/31773673/3597276 – 2015-08-02 15:59:31

我可以有一个ID为编号的div吗？

是的，你可以。

id仅由数字are perfectly valid in HTML组成的值;除了空间外什么都可以。虽然较早的HTML规范更具限制性（ref,ref），但需要一小组字符并以字母开头，浏览器从不关心，这是HTML5规范打开功能的重要组成部分。

如果你要与CSS选择使用这些id S（例如，风格他们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

下面是使用与id“12 div一个例子“并用三种方式做事：

使用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>

我从来没有见过在浏览器上面的失败。这里有一个子集，我已经看到了它在工作的浏览器：

铬26，34，39
IE6，IE8，IE9，IE10，IE11
火狐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这样的选择器很难阅读。

来源

2011-04-15 06:01:11

只是添加 - 只是因为你*可以*做一些事情并不意味着你*应该*。 HTML5摆脱限制并不重要，它在程序员中是非常标准的，不用启动方法，函数或任何带数字的东西 - 所以为什么要改变标记语言？坚持你已经做的:) – Jimbo 2013-05-31 11:21:47

正如一旁，对于necro抱歉，这是我的问题之一与HTML5。对于它添加的每一个令人敬畏的功能，它都会使我们在HTML/XHTML中已经习以为常的验证和规则失效，这可能是人们今天有这么多问题的原因，你知道吗？ – Zarathuztra 2013-12-09 14:26:25

@ Zarazthuztra：显然在这种情况下，这只是现实的反映。事实上，浏览器只允许一个空间，所以他们编写了它。 – 2013-12-09 14:38:37

从HTML 5 specs ...

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

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

有什么形成一个ID可以在没有其他限制;在具体地，ID可以包括只是数字，以数字开头，以下划线开头，由刚标点符号等

一个元素的唯一标识符可以被用于各种目的，最值得注意的是如的方式链接到使用片段标识符一个文档的特定部分，以此为目标元素时的脚本，和作为一种方法来从样式CSS的特定元素。

标识符是不透明的字符串。特别含义不应该从ID属性的值的。

所以......是的:)

从HTML 4.01 specs ...

ID必须以字母开头（[A-ZA-Z]），并可以跟随通过任何数目的字母，数字（[0-9]），连字符（ “ - ”），下划线（ “_”），冒号（ “：”），和周期（ “”）。

所以......没:(

来源

2011-04-15 06:01:42 Hristo

正如在其他答复中指出，答案是技术上：

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（大写'F'）中的HTML（小写'f'）和.FirstName {color：red}中键入id =“firstName”，则错误的浏览器不会设置元素的颜色变红。由于这两个定义都使用有效字符作为id，因此您将不会收到来自验证工具的错误。

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

同样的问题已经问

What are valid values for the id attribute in HTML?

来源

2011-04-15 06:18:57

*“jQuery遇到包含句点和冒号的id问题”*是否？在过去几年的发布？什么样的问题？任何不是用户错误？链接：[在FAQ中使用带点和冒号的ID]（http://docs.jquery.com/Frequently_Asked_Questions#How_do_I_select_an_element_by_an_ID_that_has_characters_used_in_CSS_notation.3F），[示例]（http://jsbin.com/unodo5）尽管如此，无论如何，尽管如此，与不完善工具的兼容性还是很好的一点。 – 2011-04-15 08:54:24

从维护的角度来看，这是一个坏主意。身份证应至少有点描述他们代表什么。用有意义的前缀来符合其他人已经回答的内容。例如：

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

来源

2013-11-29 15:12:17 Zarathuztra

Downvote谨慎解释？对不起，但这个答案没有任何一部分是有错误的。这是基于别人所说的一致意见和建议。 – Zarathuztra 2013-12-09 14:24:18

我不是downvoting，但想要使观察，大量的id这种方法导致了很多本质上无价值的膨胀。而且，这意味着每次引用一个id时，都需要解析它以拆分phoneNumber_位并获取真实ID。此外，ID并不打算具有语义含义，它们只是旨在具有独特性。 – Pancho 2016-04-07 22:13:12

虽然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";

正确显示播放时髦的音乐

来源

2016-04-07 22:48:23 Pancho

您也可以选择该类型ID（尽管这绝不是创造这样以数字开头的ID的最佳实践）通过执行以下操作：

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

来源

2017-04-15 04:27:04 andddrey

我可以使用ID作为编号的div吗？

回答

相关问题