HTML：有效的id属性值？

Question

在创建 HTML 元素的 id 属性时，对于其值有哪些规则？

- Mr Shark

---

HTML5与之前的版本规范有所不同。我在这里解释了它：http://mathiasbynens.be/notes/html5-id-class - Mathias Bynens

我注意到 SharePoint 2010 分配了如下的值 - {8CC7EF38-31D8-4786-8C20-7E6D56E49AE2}-{E60CE5E2-6E64-4350-A884-654B72DA5A53}，用于动态生成的 Web 部件中的表格。在其中包含这种 ID 值的页面中，各种受欢迎的浏览器都不会出现错误。然而，通过 JavaScript 处理这样的 ID 值是棘手的 - http://mvark.blogspot.in/2012/07/building-dynamic-jquery-selector-for.html - mvark

HTML4和HTML5中对ID值的要求非常不同。以下是HTML5 ID规则的快速完整概述：https://dev59.com/83VD5IYBdhLWcg3wJIEK#31773673 - Michael Benjamin

请注意：按照某些答案所说，使用 jQuery 中的句号（“**.**”）会导致很多麻烦。例如，如果使用 <input id="me.name" />，然后调用 $("#me.name").val()，jQuery 将会寻找一个类为 .name 的 <me> 标签，而这并不是我们想要的结果！请谨慎使用。 - Can O' Spam

不用，你只需要像文档中所述一样转义特殊字符即可。请查看此在线演示。 - Álvaro González

Answer 1

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

ID和名称令牌必须以字母（[A-Za-z]）开头，后面可以跟任意数量的字母、数字([0-9])、连字符("-")、下划线("_")、冒号(":")和句点(".")。

HTML 5 更加自由，只要求 id 必须包含至少一个字符，并且不能包含任何空格字符。

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

作为一个纯粹的实际问题，您可能希望避免某些字符。句点、冒号和#在CSS选择器中具有特殊含义，因此您必须使用CSS中的反斜杠或传递给jQuery的选择器字符串中的双反斜杠来转义这些字符。在使用id中的句点和冒号之前，请考虑您将不得不多少次转义样式表或代码中的字符。

例如，HTML 声明 <div id="first.name"></div> 是有效的。你可以在 CSS 中选择该元素，如 #first\.name，在 jQuery 中也可以这样做：$('#first\\.name')。 但是如果你忘记了反斜杠，$('#first.name')，你将会得到一个完全有效的选择器，寻找一个具有 id 为 first 并且还有类名为 name 的元素。这是一个容易被忽视的错误。你可能更愿意在长期运行中选择 id first-name（使用连字符而不是句点）。

通过严格遵守命名约定，你可以简化开发任务。例如，如果你完全限制自己只使用小写字母，并始终使用连字符或下划线分隔单词（但不要同时使用两者，选择其中一种并永远不要使用另一种），那么你就有了一个易于记忆的模式。你永远不会想知道“是 firstName 还是 FirstName？”因为你总是知道应该输入 first_name。喜欢驼峰命名法？那就限制自己只使用它，没有连字符或下划线，并始终、一致地使用大写或小写字母作为第一个字符，不要混用。

---

一个现在非常难以理解的问题是至少有一个浏览器，即Netscape 6，错误地把id属性值当作区分大小写处理。这意味着如果你在HTML中键入了id="firstName"（小写'f'）并在CSS中键入了#FirstName { color: red }（大写'F'），那个有缺陷的浏览器将无法将元素的颜色设置为红色。截至编辑时，即2015年4月，我希望您不需要支持Netscape 6。把它当做一段历史记录吧。

- dgvid

---

请注意，在XHTML中，class和id属性是区分大小写的，而其他属性不区分大小写。这是我参加Eric Meyer的CSS研讨会时听到的。 - John Topley

请注意，如果您尝试编写一个CSS规则来通过ID选择一个元素，并且该ID以数字开头，则无法使用。遗憾！ - Zack The Human

关于在使用jQuery时在ID中使用'.'或':'，请参见jQuery [FAQ]（http://docs.jquery.com/Frequently_Asked_Questions#How_do_I_select_an_element_by_an_ID_that_has_characters_used_in_CSS_notation.3F）。它包含一个小函数，用于进行必要的转义。 - Wolfram

jQuery常见问题解答中@Wolfram提到的是如何选择具有在CSS符号中使用的字符的ID元素。 - owengall

另一个关键的限制是id值必须是唯一的。我知道这似乎很明显，但我已经看到这个规则被违反了太多次。 - brennanyoung

我在使用Firefox时遇到了一个问题，无法应用CSS样式span#hs.order。请参考https://bugzilla.mozilla.org/show_bug.cgi?id=1861666。 - undefined

Answer 2

根据HTML 4规范:

ID和NAME标记必须以字母（[A-Za-z]）开头，后面可以跟随任意数量的字母、数字([0-9])、连字符（"-"）、下划线("_")、冒号(":")和句点(".")。

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

- Peter Hilton

---

请注意，HTML5允许的内容比HTML4更多，例如可以参考http://www.456bereastreet.com/archive/201011/html5_allows_almost_any_value_for_the_id_attribute_use_wisely/和http://www.w3.org/TR/html5/elements.html#the-id-attribute。 - Mr Shark

Answer 3

在id/name属性中，技术上可以使用冒号和句号，但我强烈建议避免使用。

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

如果您给一个元素命名为"id=my.cool:thing"，那么您的CSS选择器就会像这样：

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

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

只使用大小写字母、数字、下划线和连字符。并且如上所述，请确保您的ID是唯一的。

这应该是您的首要关注点。

- Michael Thompson

---

你可以使用冒号和句点，但需要使用双反斜杠进行转义，例如：$('#my\.cool\:thing')或转义变量：$('#'+id.replace(/./,’\.’).replace(/:/,’\:’))http://groups.google.com/group/jquery-en/browse_thread/thread/ba072168939b245a - joeformd

请参考Álvaro González的回答。 - Peter Mortensen

请使用a-z0-9_-.，避免使用大写字母，因为浏览器似乎不能真正区分大小写（很丑）。 - Britton Kerin

Answer 4

HTML5: ID和Class属性的允许值

自HTML5 开始，ID 属性的取值只需满足以下条件：

1. 在文档中必须是唯一的。
2. 不能包含空格。
3. 必须至少包含一个字符。

对于 Class 属性也有类似的规则（当然不需要唯一性）。

因此，ID 和 Class 的取值可以是全数字、单个数字、标点符号以及特殊字符等，但不能包含空格。这与 HTML4 中有很大的不同。

在 HTML4 中，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、正则表达式）引起问题。

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

<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元素分配给它的类包括在类属性的值上拆分时返回的所有类。（重复的忽略。）

在类属性中，作者可以使用的标记没有其他限制，但鼓励作者使用描述内容性质而非所需内容呈现的值。

- Michael Benjamin

Answer 5

jQuery可以处理任何有效的ID名称。您只需要转义元字符（即点、分号、方括号等）。这就像说JavaScript仅因为您无法编写而引用引号而有问题。

var name = 'O'Hara';

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

- kAlvaro

---

这是对另一个答案的评论，不试图回答原始问题。 - Sean

@Sean 早些时候，这个问题被标记为jQuery。现在看来确实没有多大意义。但是，老实说，我已经记不清13年前我当时想的是什么了。 - Álvaro González

Answer 6

严格来说，它应该匹配

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

但是jQuery似乎对冒号有些问题，因此最好避免使用它们。

- Mr Shark

---

或者说：「所以最好避免使用 jQuery」。;) - domsson

请参考Álvaro González的回答。 - Peter Mortensen

@domsson 为什么我们应该避免使用 JQuery？您可以提供更多的信息吗？ - Tornike Shavishvili

Answer 7

HTML5:

它取消了对 id 属性的额外限制 (见此)。仅保留以下要求 (除了在文档中唯一)：

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

---

Pre-HTML5:

ID 应该匹配：

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

1. 必须以A-Z或a-z字符开头
2. 可以包含-（连字符）、_（下划线）、:（冒号）和.（句点）

但应避免使用:和.，因为：

例如，一个ID可能被标记为“a.b:c”，并在样式表中引用为# a.b：c，但除了作为元素的ID外，它还可以表示ID“a”，类“b”，伪选择器“c”。最好避免混淆，完全不使用.和:。

- Zaheer Ahmed

---

在HTML5中，id不接受 id="c365720c"。 - DecPK

实际上，HTML5 确实可以。 - KHAYRI R.R. WOULFE

Answer 8

连字符、下划线、句点、冒号、数字和字母都可以在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

Answer 9

实际上，许多网站使用以数字开头的id 属性，尽管这在技术上不是有效的HTML。

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

- pdc

Answer 10

HTML5

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

在HTML5中，关于ID内容的规则是（除了要保证唯一性）：

这个属性的值不能包含空格。[...] 虽然这个限制在HTML 5中被取消了，但为了兼容性，ID应该以字母开头。

这是关于ID的 W3 规范（来自MDN）：

任何字符串，以下是一些限制：

• 必须至少为一个字符长
• 不能包含任何空格字符

HTML的早期版本对ID值的内容有更严格的限制（例如，它们不允许ID值以数字开头）。

更多信息：

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

- Sergio