HTML中id属性的有效值是什么？

2015

id为HTML元素创建属性时，该值有哪些规则？

html id

— 鲨鱼先生
source

96

HTML5和规范的早期版本之间有所不同。我在这里进行了解释：mathiasbynens.be/notes/html5-id-class

— Mathias Bynens 2011年

5

我注意到SharePoint 2010为此分配了一个值-{8CC7EF38-31D8-4786-8C20-7E6D56E49AE2}-{E60CE5E2-6E64-4350-A884-654B72DA5A53}为Web部件和ID值为这种类型在任何流行的浏览器中都没有中断。通过JavaScript之类的ID值处理是棘手虽然- mvark.blogspot.in/2012/07/...

— mvark

3

HTML4和HTML5对ID值的要求有很大不同。这是HTML5 ID规则的快速完整概述：stackoverflow.com/a/31773673/3597276

— Michael Benjamin

5

请注意：按照某些答案所说的做，并使用句点（**.**)使用jQuery将给您带来很多麻烦，例如，使用<input id="me.name" />，然后$("#me.name").val()将导致jQuery <me>使用class 查找标签.name，而没人要真的！

— O

3

@SamSwift웃不，您只需按照文档所说转义特殊字符即可。请检查此在线演示。

— 阿尔瓦罗·冈萨雷斯

1702

对于HTML 4，技术上的答案是：

ID和NAME令牌必须以字母（[A-Za-z]）开头，然后可以跟任意数量的字母，数字（[0-9]），连字符（“-”），下划线（“ _”），冒号（“：”）和句点（“。”）。

HTML 5甚至更宽容，只说一个id必须至少包含一个字符，并且不得包含任何空格字符。

在XHTML中，id属性区分大小写。

从纯粹的实践出发，您可能要避免使用某些字符。在CSS选择器中，句号，冒号和'＃'具有特殊含义，因此您必须在CSS中使用反斜杠或在传递给jQuery的选择器字符串中使用双反斜杠来转义那些字符。想一想，在迷上句点和ID中的冒号之前，必须多久在样式表或代码中转义一个字符。

例如，HTML声明<div id="first.name"></div>有效。您可以#first\.name像在CSS 和jQuery中那样在CSS中选择该元素：$('#first\\.name').但是，如果您忘记了反斜线，$('#first.name')则将有一个非常有效的选择器来查找具有id的元素first并具有class name。这是一个容易忽略的错误。从长远来看，您可能会更高兴选择id first-name（连字符而不是句点）。

您可以严格遵守命名约定来简化开发任务。例如，如果您将自己完全限制为小写字母，并且始终使用连字符或下划线来分隔单词（但不能同时使用连字符或下划线来分隔单词），则您将拥有一种易于记忆的模式。您将永远不会怀疑“是firstName还是FirstName？” 因为您将永远知道您应该输入first_name。喜欢骆驼案吗？然后限制自己，不要使用连字符或下划线，并且始终对第一个字符使用大写或小写，请勿混用。

现在一个非常模糊的问题是，至少一个浏览器Netscape 6 错误地将id属性值视为区分大小写。这意味着，如果您id="firstName"在HTML（小写字母“ f”）和#FirstName { color: red }CSS（大写字母“ F”）中键入内容，则该错误的浏览器将无法将元素的颜色设置为红色。在进行此编辑（2015年4月）时，希望您不会被要求支持Netscape6。请考虑一下这是一个历史脚注。

— dgvid
source

78

请注意，在XHTML中，class和id属性区分大小写，而其他所有属性都不区分大小写。埃里克·迈耶（Eric Meyer）在我参加的CSS研讨会上提到了这一点。

— 约翰·托普利

31

另请注意，如果您尝试编写CSS规则以按ID定位元素，并且ID存在数字，则该规则将无效。mm！

— Zack The Human

55

至于“。” 或使用jQuery的ID中的“：”，请参阅jQuery FAQ。它包含一个小的功能，可以进行必要的转义。

— Wolfram

7

该id属性为[ w3.org/TR/html4/struct/global.html#adef-id]（HTML4中区分大小写），并且必须以字母开头（限于A到Z）。还要注意，您的示例不应使元素的文本颜色变为红色，因为CSS引用的类FirstName不是您的元素id。

— 奥古斯都·克林

5

奥古斯都指出的错误仍然存在。在您的示例中，如果同时id="firstName"使用HTML 4或HTML 5和#FirstName { color: red }CSS，则只有错误的浏览器会将元素的颜色设置为红色。

— Stephen Booher 2012年

221

根据HTML 4规范：

ID和NAME令牌必须以字母（[A-Za-z]）开头，然后可以跟任意数量的字母，数字（[0-9]），连字符（“-”），下划线（“ _”），冒号（“：”）和句点（“。”）。

一个常见的错误是使用以数字开头的ID。

— 彼得·希尔顿
source

20

请注意，HTML5比HTML4允许的更多，请参见例如456bereastreet.com/archive/201011/…和w3.org/TR/html5/elements.html#the-id-attribute

— Shark先生，2010年

IE6不支持以下划线开头的ID，但无论如何它都已失效。

— doc_id 2012年

2

@rahmanisback关于IE6，有人会这么想，但我现在正在为一家银行完成一项提案，他们坚持认为卖方开发的任何应用程序都可以在IE6中运行。这是针对30,000个用户的。哎呀，如果我们能让他们更新所有台式机上的浏览器，那可能只会帮助失业率上升。

— 卡尔

2

@Karl很抱歉听到这个消息。尽一切努力警告IE6安全问题。但是IE7将很快成为新的IE6，因此，纠正MS过去的错误似乎是我们这个行业的命运。

— doc_id 2012年

@MrShark第二个链接断开；新链接

— SWdV 2015年

155

从技术上讲，您可以在id / name属性中使用冒号和句点，但我强烈建议您避免同时使用这两者。

在CSS（和jQuery等多个JavaScript库）中，句号和冒号都有特殊含义，如果不小心，就会遇到问题。句点是类选择器，而冒号是伪选择器（例如，当鼠标悬停在元素上时，元素的“：hover”）。

如果为元素提供id为“ my.cool:thing”，则CSS选择器将如下所示：

#my.cool:thing { ... /* some rules */ ... }

这实际上是在讲CSS的“ id为'my'，'cool'类和'thing'伪选择器的元素”。

不论大小写，数字，下划线和连字符，都应遵守AZ。如上所述，请确保您的ID是唯一的。

那应该是您的首要考虑。

— 迈克尔·汤普森
source

21

您可以使用冒号和句点-但您需要使用双反斜杠将其转义，例如：$（'＃my \\。cool \\：thing'）或转义变量：$（'＃'+ id.replace （ '\\'/ \ ./，）代替（/ \：/， '\\：'）） groups.google.com/group/jquery-en/browse_thread/thread/...

— joeformd

2

为什么不是数字？为什么只是AZ？只要引用的数字与以数字为键的数据相关的元素（只要您不以数字开头），数字都是非常有用的ID。

— cori 2011年

4

仅供参考，破折号在技术上是连字符。减号不在ASCII字符集中。en.wikipedia.org/wiki/Plus_and_minus_signs#Character_codes

— 安东Strogonoff

4

如果您在ID中包含这些字符（.，:），并且无法删除它们（咳嗽...共享点），则可以在CSS中使用属性选择器代替ID选择器来解决此问题，例如[id='my.cool:thing']，但是此选择器的特异性比id选择器，这可能会导致其他问题。

— 浮士德2013年

2

我知道是旧的，但已更新为包括连字符的数字和后备字母

— Michael Thompson

67

jQuery 会处理任何有效的ID名称。您只需要转义元字符（即点，分号，方括号...）。就像说JavaScript引号有问题只是因为您不能编写

var name = 'O'Hara';

jQuery API中的选择器（请参阅底部注释）

— 阿尔瓦罗·冈萨雷斯（ÁlvaroGonzález）
source

66

严格应该匹配

[A-Za-z][-A-Za-z0-9_:.]*

但是jquery似乎在冒号方面存在问题，因此最好避免使用冒号。

— 鲨鱼先生
source

1

或替代：“因此最好避免使用jquery”。;）

— domsson

59

HTML5：

摆脱了对id属性的其他限制，请参见此处。剩下的唯一要求（除了在文档中是唯一的）是：

该值必须包含至少一个字符（不能为空）
它不能包含任何空格字符。

HTML5之前的版本：

ID应匹配：

[A-Za-z][-A-Za-z0-9_:.]*

必须以AZ或az字符开头
可能包含-（连字符），_（下划线），:（冒号）和.（句号）

但应避免:并.因为：

例如，一个ID可以标记为“ ab：c”，并在样式表中称为#ab：c，但作为元素的ID，也可能意味着id为“ a”，类为“ b”，伪选择器“ c”。最好避免混乱，并远离使用。和：总共。

— 扎赫尔·艾哈迈德（Zaheer Ahmed）
source

57

HTML5：ID和类属性的允许值

从HTML5开始，对ID值的唯一限制是：

在文档中必须唯一
不得包含任何空格字符
必须至少包含一个字符

类似的规则适用于类（当然，唯一性除外）。

因此，值可以是全数字，仅一位数字，标点符号，包括特殊字符等。只是没有空格。这与HTML4有很大的不同。

在HTML 4中，ID值必须以字母开头，然后只能跟字母，数字，连字符，下划线，冒号和点号。

在HTML5中，这些是有效的：

<div id="999"> ... </div>
<div id="#%LV-||"> ... </div>
<div id="____V"> ... </div>
<div id="⌘⌥"> ... </div>
<div id="♥"> ... </div>
<div id="{}"> ... </div>
<div id="©"> ... </div>
<div id="♤₩¤☆€~¥"> ... </div>

请记住，在ID的值中使用数字，标点符号或特殊字符可能会在其他情况下（例如CSS，JavaScript，regex）引起麻烦。

例如，以下ID在HTML5中有效：

<div id="9lions"> ... </div>

但是，在CSS中无效：

根据CSS2.1规范：

4.1.3字符和大小写

在CSS中，标识符（包括选择器中的元素名称，类和ID）只能包含字符[a-zA-Z0-9]和ISO 10646字符U + 00A0及更高版本，以及连字符（-）和下划线（ _）; 他们不能以数字，两个连字符或以数字开头的连字符开头。

在大多数情况下，您可以在有限制或特殊含义的情况下转义字符。

W3C参考

HTML5

3.2.5.1 id 属性

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

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

注意：ID可以采用什么形式没有其他限制；特别是ID可以仅由数字组成，以数字开头，以下划线开头，仅由标点符号等组成。

3.2.5.7 class 属性

如果指定了属性，则该属性必须具有一个值，该值是一组用空格分隔的标记，代表该元素所属的各种类。

HTML元素分配给它的类包括当class属性的值在空格上分割时返回的所有类。（重复项将被忽略。）

作者可以在class属性中使用的令牌没有其他限制，但是鼓励作者使用描述内容性质的值，而不是描述内容期望呈现的值。

— 迈克尔·本杰明
source

34

实际上，许多站点使用id以数字开头的属性，即使从技术上讲这不是有效的HTML。

在HTML 5规范草案放宽了规则的id和name属性：他们现在不能包含空格只是不透明的字符串。

— 直流电源
source

32

连字符，下划线，句点，冒号，数字和字母都可与CSS和JQuery一起使用。以下内容应该可以使用，但在整个页面中必须是唯一的，并且必须以字母[A-Za-z]开头。

使用冒号和句号需要做更多的工作，但是您可以按照以下示例所示进行操作。

<html>
<head>
<title>Cake</title>
<style type="text/css">
    #i\.Really\.Like\.Cake {
        color: green;
    }
    #i\:Really\:Like\:Cake {
        color: blue;
    }
</style>
</head>
<body>
    <div id="i.Really.Like.Cake">Cake</div>
    <div id="testResultPeriod"></div>

    <div id="i:Really:Like:Cake">Cake</div>
    <div id="testResultColon"></div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
            var testPeriod = $("#i\\.Really\\.Like\\.Cake");
            $("#testResultPeriod").html("found " + testPeriod.length + " result.");

            var testColon = $("#i\\:Really\\:Like\\:Cake");
            $("#testResultColon").html("found " + testColon.length + " result.");
        });
    </script>
</body>
</html>

— blacksun1
source

25

HTML5

请记住，ID必须是唯一的，即。文档中不得有多个具有相同ID值的元素。

HTML5中有关ID内容的规则是（除了唯一）：

This attribute's value must not contain white spaces. [...] 
Though this restriction has been lifted in HTML 5, 
an ID should start with a letter for compatibility.

这是有关ID（frnn MDN）的W3规范：

Any string, with the following restrictions:
must be at least one character long
must not contain any space characters
Previous versions of HTML placed greater restrictions on the content of ID values 
(for example, they did not permit ID values to begin with a number).

更多信息：

W3-全局属性（id）
MDN属性（id）

— 塞尔吉奥
source

18

要引用带有句点的ID，您需要使用反斜杠。不确定连字符或下划线是否相同。例如：HTML

<div id="maintenance.instrumentNumber">############0218</div>

的CSS

#maintenance\.instrumentNumber{word-wrap:break-word;}

— 安东尼
source

3

连字符和下划线通常不需要转义。但是，例外情况是连字符出现在标识符的开头，并且后跟另一个连字符（例如\--abc）或数字（例如\-123）。

— MrWhite

16

从HTML 4规范...

ID和NAME令牌必须以字母（[A-Za-z]）开头，然后可以跟任意数量的字母，数字（[0-9]），连字符（“-”），下划线（“ _”），冒号（“：”）和句点（“。”）。

编辑：天哪！再次被殴打！

— 史蒂夫·摩根
source

16

另外，请不要忘记ID是唯一的。使用后，ID值可能不会再出现在文档中的任何位置。

您可能有许多ID，但是所有ID都必须具有唯一值。

另一方面，有类元素。就像ID一样，它可以出现很多次，但是该值可以反复使用。

— 沃德勒
source

12

元素的唯一标识符。

文档中不得有多个具有相同ID值的元素。

任何字符串，具有以下限制：

必须至少一个字符长
不得包含任何空格字符：
- U + 0020空间
- U + 0009字符制表符（标签）
- U + 000A LINE FEED（LF）
- U + 000C FORM FEED（FF）
- U + 000D回车（CR）

使用除外的字符ASCII letters and digits, '_', '-' and '.'可能会导致兼容性问题，因为不允许使用HTML 4。尽管已取消此限制HTML 5，但为了兼容，ID应该以字母开头。

— 巴文·索兰基（Bhavin Solanki）
source

11

看起来，尽管冒号（:)和句点（。）在HTML规范中有效，但它们在CSS中作为id选择器无效，因此，如果打算将它们用作此目的，最好避免使用。

— st
source

@MathiasBynens链接已断开。现在是mothereff.in/css-escapes#0foo%23bar.baz%3Aqux

— Oriol

如果您正确地逃避了它们，它们就不是无效的。参见 mothereff.in/css-escapes#0foo%23bar.baz%3Aqux

— Mathias Bynens 2014年

10

对于 HTML5

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

至少一个字符，没有空格。

这为诸如用重音符号的有效用例打开了大门。这也给了我们更多弹药，因为您现在可以使用id值，除非您非常小心，否则它们会导致CSS和JavaScript出现问题。

— Kanishka Panamaldeniya
source

9

ID最适合命名布局的某些部分，因此ID和类的名称不应相同
ID允许使用字母数字和特殊字符
但避免使用# : . * !符号
不允许有空格
不是以数字或连字符开头的数字
区分大小写
使用ID选择器比使用类选择器快
对于长CSS类或ID规则名称，请使用连字符“-”（下划线“ _”也可以使用，但对seo不利）
如果规则将ID选择器作为其键选择器，请不要将标签名称添加到规则中。由于ID是唯一的，因此添加标签名称会不必要地减慢匹配过程。
在HTML5中，可以在任何HTML元素上使用id属性，在HTML 4.01中，不能将id属性用于： <base>, <head>, <html>, <meta>, <param>, <script>, <style>, and <title>.

— 网页设计师兼推广员
source

“下划线也可以使用，但对seo不利”：搜索引擎何时开始对CSS类或id名称感兴趣？

— 尼克·赖斯

9

任何字母数字值以及“ - ”和“ _ ”均有效。但是，您应该以AZ或az之间的任何字符开头id名称。

— 塔兹瓦尔·乌特沙斯（Tazwar Utshas）
source

6

没有空格，必须至少从a到z以及0到9之间的一个字符开头。

— 温博·穆伦巴（Wembo Mulumba）
source

4

在HTML中

ID应该以{AZ}或{az} 开头，您可以添加数字，句点，连字符，下划线，冒号。

例如：

<span id="testID2"></span>
<span id="test-ID2"></span>
<span id="test_ID2"></span>
<span id="test:ID2"></span>
<span id="test.ID2"></span>

但是，即使您可以使用冒号（:)或period（。）来创建ID，对于CSS来说，也很难将这些ID用作选择器。主要是当您想使用伪元素（：before，：after）时。

同样在JS中，很难选择这些ID。因此，您应该使用前四个ID作为许多开发人员的首选，并且如果有必要，还可以使用后两个ID。

— 德波卡利亚
source

4

值可以是：[az]，[AZ]，[0-9]，[* _：-]

它用于HTML5 ...

我们可以使用任何标签添加ID。

— Jyotirmoy Bhattacharyya
source

2

从ES2015开始，如果文档字符集设置为UTF8，我们几乎也可以将所有Unicode字符用作ID。

在这里测试：https : //mothereff.in/js-variables

在ES2015中，标识符必须以$，_或具有Unicode派生的核心属性ID_Start的任何符号开头。

标识符的其余部分可以包含$，_，U + 200C零宽度非连接符，U + 200D零宽度连接符，或具有Unicode派生的核心属性ID_Continue的任何符号。

const target = document.querySelector("div").id
console.log(
   target
)
document.getElementById(target).style.backgroundColor = "black"

div {
  border: 1px black solid;
  width: 100%;
  height: 200px
}

<div id="H̹̙̦̮͉̩̗̗ͧ̇̏̊̾Eͨ͆͒̆ͮ̃͏̷̮̣̫̤̣Cͯ̂͐͏̨̛͔̦̟͈̻O̜͎͍͙͚̬̝̣̽ͮ͐͗̀ͤ̍̀͢M̴̡̲̭͍͇̼̟̯̦̉̒͠Ḛ̛̙̞̪̗ͥͤͩ̾͑̔͐ͅṮ̴̷̷̗̼͍̿̿̓̽͐H̙̙̔̄͜">

展开摘要

你应该使用它吗？可能不是一个好主意！

了解更多信息：https : //stackoverflow.com/a/52799593/2494754

— NVRM
source

-4

字母->大写和小
数字-> 0-9
特殊字符->'：'，'-'，'_'，'。'

格式应以“。”开头。或字母，然后是更多字母或数字的特殊字符。id字段的值不得以“ _”结尾。
另外，不允许使用空格（如果提供的话），它们将被视为不同的值，在id属性的情况下无效。

— Shashank N. Pandey
source