提问人：Mr Shark 提问时间：9/16/2008 最后编辑：Top-MasterMr Shark 更新时间：4/29/2023 访问量：549008
HTML：有效的 id 属性值？
HTML: Valid id attribute values?
答：
239赞
Peter Hilton
9/16/2008
#1
从 HTML 4 规范：
ID 和 NAME 标记必须以字母 （[A-Za-z]） 开头，后跟任意数量的字母、数字 （[0-9]）、连字符 （“-”）、下划线 （“_”）、冒号 （“：”） 和句点 （“.”）。
一个常见的错误是使用以数字开头的 ID。
评论
25赞
Mr Shark
11/30/2010
请注意，HTML5 允许的不仅仅是 HTML4，例如 456bereastreet.com/archive/201011/... 和 w3.org/TR/html5/elements.html#the-id-attribute
69赞
Mr Shark
9/16/2008
#2
严格来说，它应该匹配
[A-Za-z][-A-Za-z0-9_:.]*
但是jQuery似乎有冒号问题，所以最好避免使用它们。
评论
19赞
domsson
1/11/2020
或者：“所以最好避免jquery”。;)
0赞
Peter Mortensen
8/8/2021
参见阿尔瓦罗·冈萨雷斯的回答。
0赞
Tornike Shavishvili
11/8/2021
@domsson 我们为什么要避免使用JQuery？您能给我们更多信息吗？
19赞
Steve Morgan
9/16/2008
#3
来自 HTML 4 规范...
ID 和 NAME 标记必须以字母 （[A-Za-z]） 开头，后跟任意数量的字母、数字 （[0-9]）、连字符 （“-”）、下划线 （“_”）、冒号 （“：”） 和句点 （“.”）。
35赞
pdc
9/16/2008
#4
在实践中，许多网站使用以数字开头的属性，即使这在技术上是无效的 HTML。id
HTML 5 草案规范放宽了 and 属性的规则：它们现在只是不透明的字符串，不能包含空格。idname
17赞
Vordreller
9/16/2008
#5
此外，永远不要忘记 ID 是唯一的。使用后，ID 值可能不会再次出现在文档中的任何位置。
您可能有许多 ID，但所有 ID 都必须具有唯一值。
另一方面，有类元素。就像 ID 一样，它可以出现很多次，但该值可能会反复使用。
176赞
Michael Thompson
9/16/2008
#6
从技术上讲，您可以在 id/name 属性中使用冒号和句点，但我强烈建议避免同时使用两者。
在CSS（以及jQuery等几个JavaScript库）中，句点和冒号都有特殊的含义，如果你不小心，你会遇到问题。句点是类选择器，冒号是伪选择器（例如，当鼠标悬停在元素上时，元素的“：hover”）。
如果你给一个元素的 id 是 “my.cool：thing”，你的 CSS 选择器将如下所示：
#my.cool:thing { ... /* some rules */ ... }
这实际上是在说，在CSS中，“id为'my'的元素，'cool'类和'thing'伪选择器”。
坚持使用任何大小写、数字、下划线和连字符的 AZ。如上所述，请确保您的 ID 是唯一的。
这应该是你首先关心的问题。
评论
27赞
joeformd
12/3/2009
您可以使用冒号和句点 - 但您需要使用双反斜杠对它们进行转义，例如：$（'#my\\.cool\\：thing'） 或转义变量：$（'#'+id.replace（/\./，'\\.'）。替换（/\：/，'\\：'）） groups.google.com/group/jquery-en/browse_thread/thread/...
0赞
Peter Mortensen
8/8/2021
参见阿尔瓦罗·冈萨雷斯的回答。
1赞
Britton Kerin
8/23/2022
坚持 a-z0-9_-。避免大写，因为浏览器显然没有真正区分大小写 （ug）。
1887赞
dgvid
9/17/2008
#7
对于 HTML 4，从技术上讲，答案是：
ID 和 NAME 标记必须以字母 （[A-Za-z]） 开头，后跟任意数量的字母、数字 （[0-9]）、连字符 （“-”）、下划线 （“_”）、冒号 （“：”） 和句点 （“.”）。
HTML 5 更加宽松，只说 id 必须包含至少一个字符，并且不能包含任何空格字符。
id 属性在 XHTML 中区分大小写。
作为一个纯粹的实际问题，你可能想避免某些字符。句点、冒号和“#”在 CSS 选择器中具有特殊含义，因此您必须使用 CSS 中的反斜杠或传递给 jQuery 的选择器字符串中的双反斜杠来转义这些字符。想一想，在你疯狂地使用id中的句点和冒号之前，你必须多久对样式表或代码中的字符进行转义。
例如，HTML 声明有效。您可以在 CSS as 和 jQuery 中选择该元素，如下所示： 但是，如果您忘记了反斜杠，您将有一个完全有效的选择器，用于查找具有 id 且具有 class 的元素。这是一个容易被忽视的错误。从长远来看，选择 id（连字符而不是句点）可能会更快乐。<div id="first.name"></div>#first\.name$('#first\\.name').$('#first.name')firstnamefirst-name
您可以通过严格遵守命名约定来简化开发任务。例如，如果您将自己完全限制为小写字符，并且始终使用连字符或下划线分隔单词（但不要同时使用连字符或下划线，请选择一个，永远不要使用另一个），那么您就有一个易于记忆的模式。你永远不会怀疑“是还是？”，因为你永远知道你应该打字。更喜欢骆驼案？然后限制自己，不要使用连字符或下划线，并且始终始终对第一个字符使用大写或小写，不要混用它们。firstNameFirstNamefirst_name
现在一个非常模糊的问题是，至少有一个浏览器 Netscape 6 错误地将 id 属性值视为区分大小写。这意味着，如果您输入了 HTML（小写字母“f”）和 CSS（大写字母“F”），则该有缺陷的浏览器将无法将元素的颜色设置为红色。在 2015 年 4 月进行编辑时，我希望您没有被要求支持 Netscape 6。将此视为历史脚注。id="firstName"#FirstName { color: red }
评论
83赞
John Topley
4/22/2009
请注意，class 和 id 属性在 XHTML 中区分大小写，所有其他属性都不区分大小写。 Eric Meyer 在我参加的 CSS 研讨会上提到了这一点。
37赞
Zack The Human
1/20/2010
另请注意，如果您尝试编写 CSS 规则以按 ID 定位元素，并且 ID 带有数字，则它将不起作用。无赖！
56赞
Wolfram
5/6/2010
对于使用 jQuery 的 ID 中的 '.' 或 '：“，请参阅 jQuery 常见问题解答。它包含一个小函数，可以进行必要的转义。
0赞
owengall
12/29/2021
@Wolfram引用的 jquery FAQ 答案是 how-do-i-select-an-element-by-an-id-that-has-characters-used-in-css-notation。
2赞
brennanyoung
8/30/2022
ID 值的另一个关键约束是它必须是唯一的。我知道这似乎是显而易见的，但我已经看到这条规则被打破了太多次
73赞
Álvaro González
1/11/2009
#8
jQuery 会处理任何有效的 ID 名称。你只需要转义元字符（即点、分号、方括号......这就像说 JavaScript 在引号方面有问题，只是因为你不会写
var name = 'O'Hara';
评论
1赞
Sean
1/6/2022
这是对另一个答案的评论，并不试图回答原始问题。
1赞
Álvaro González
1/6/2022
@Sean 过去，这个问题被标记为jQuery。事实上，现在这已经没有意义了。但是，老实说，我不记得 13 年前我在想什么。
12赞
lstg
4/22/2009
#9
看起来，尽管冒号（:)和句点（.）在HTML规范中是有效的，但它们在CSS中作为id选择器是无效的，因此，如果您打算将它们用于此目的，则最好避免使用它们。
评论
1赞
Oriol
11/9/2014
@MathiasBynens 链接已断开。现在 mothereff.in/css-escapes#0foo%23bar.baz%3Aqux
2赞
Mathias Bynens
11/10/2014
如果您正确转义它们，它们不会无效。查看 mothereff.in/css-escapes#0foo%23bar.baz%3Aqux
36赞
blacksun1
7/7/2010
#10
连字符、下划线、句点、冒号、数字和字母都可用于 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>
-6赞
Shashank N. Pandey
9/23/2012
#11
字母→大写字母和小字母
0-9 →位数
特殊字符→ '：'， '-'， '_'， '.'
格式应以“.”或字母开头，后跟多个字母或数字的特殊字符。id 字段的值不得以“_”结尾。
此外，不允许使用空格，如果提供空格，它们将被视为不同的值，这在 id 属性的情况下是无效的。
68赞
Zaheer Ahmed
1/18/2013
#12
HTML5的：
它摆脱了对 id 属性的额外限制（请参阅此处）。剩下的唯一要求（除了在文档中是唯一的）是：
- 该值必须至少包含一个字符（不能为空）
- 它不能包含任何空格字符。
HTML5 之前：
ID 应匹配：
[A-Za-z][-A-Za-z0-9_:.]*
- 必须以 A-Z 或 a-z 字符开头
- 可能包含（连字符）、（下划线）、（冒号）和（句点）
-_:.
但人们应该避免，因为：:.
例如，一个 ID 可以标记为“a.b：c”，并在样式表中引用为 #a.b：c，但除了作为元素的 id 之外，它还可能意味着 id “a”、类“b”、伪选择器“c”。最好避免混淆，完全避免使用。.:
评论
0赞
DecPK
4/14/2021
在 HTML5 中，id 不接受id="c365720c"
3赞
KHAYRI R.R. WOULFE
3/5/2022
实际上 HTML5 确实如此。
10赞
Web Designer cum Promoter
5/2/2013
#13
- ID 最适合命名布局的各个部分，因此不应为 ID 和类提供相同的名称
- ID 允许使用字母数字和特殊字符
- 但避免使用符号
# : . * ! - 不允许有空格
- 不以数字或连字符开头，后跟数字
- 区分大小写
- 使用 ID 选择器比使用类选择器更快
- 使用连字符“-”（也可以使用下划线“_”，但不利于SEO）作为长CSS类或ID规则名称
- 如果规则将 ID 选择器作为其键选择器，请不要将标签名称添加到规则中。由于 ID 是唯一的，因此添加标记名称会不必要地减慢匹配过程。
- 在 HTML5 中，id 属性可用于任何 HTML 元素，而在 HTML 4.01 中，id 属性不能用于：
<base>, <head>, <html>, <meta>, <param>, <script>, <style>, and <title>.
评论
0赞
Nick Rice
5/8/2016
“下划线也可以使用，但对 SEO 不利”：从什么时候开始，搜索引擎对 CSS 类或 ID 名称感兴趣？
11赞
Kanishka Panamaldeniya
8/21/2013
#14
对于 HTML5：
该值在元素主目录中的所有 ID 中必须是唯一的 子树，并且必须至少包含一个字符。该值不得 包含任何空格字符。
至少一个字符，无空格。
这为有效的用例打开了大门，例如使用重音字符。它还为我们提供了更多的弹药来搬起石头砸自己的脚，因为你现在可以使用id值，除非你真的很小心，否则这会导致CSS和JavaScript出现问题。
评论
0赞
Peter Mortensen
8/8/2021
你能在你的答案中添加引用的参考吗？（但是如果没有“编辑：”，“更新：”或类似内容，答案应该看起来像今天写的一样。
0赞
KHAYRI R.R. WOULFE
3/5/2022
在 HTML5 中，我创建了以 URL 为标识的元素，可以通过添加引用 URL 作为文档 URL 的哈希值来定位这些元素，浏览器在页面加载时自动聚焦于所述元素。
33赞
Sergio
8/27/2013
#15
HTML5的
请记住，ID 必须是唯一的，即文档中不能有多个具有相同 id 值的元素。
HTML5 中关于 ID 内容的规则是（除了唯一性）：
此属性的值不得包含空格。[...] 尽管 HTML 5 中取消了此限制，但为了兼容，ID 应以字母开头。
这是关于 ID 的 W3 规范（来自 MDN）：
任何字符串，但有以下限制：
- 长度必须至少为一个字符
- 不得包含任何空格字符
早期版本的 HTML 对 ID 值的内容施加了更大的限制（例如，它们不允许 ID 值以数字开头）。
更多信息：
21赞
Anthony
11/14/2013
#16
要引用包含句点的 id，您需要使用反斜杠。我不确定连字符或下划线是否相同。
例如：
[HTML全文]
<div id="maintenance.instrumentNumber">############0218</div>
CSS的
#maintenance\.instrumentNumber{word-wrap:break-word;}
评论
3赞
MrWhite
11/14/2013
连字符和下划线通常不需要转义。但是，例外情况是连字符出现在标识符的开头，后跟另一个连字符（例如）或数字（例如）。\--abc\-123
81赞
Michael Benjamin
8/2/2015
#17
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 规范：
在 CSS 中，标识符（包括元素名称、类和 ID 选择器）只能包含字符 [a-zA-Z0-9] 和 ISO 10646 字符 U+00A0 及更高版本，加上连字符 （-） 和下划线 (_);它们不能以数字、两个连字符或连字符开头 后跟一个数字。
在大多数情况下，您可以在字符具有限制或特殊含义的上下文中对字符进行转义。
W3C 参考资料
HTML5的
该属性指定其元素的唯一标识符 （ID）。
id该值在元素主目录中的所有 ID 中必须是唯一的 子树，并且必须至少包含一个字符。该值不得 包含任何空格字符。
注意：身份证件可以采用的形式没有其他限制;在 特别是，ID 可以只由数字组成，以数字开头，开始 带下划线，仅由标点符号等组成。
如果指定了该属性，则该属性的值必须是一组 空格分隔的标记，表示 元素属于。
HTML 元素分配给它的类由所有 拆分 class 属性的值时返回的类 空间。（重复项将被忽略。
作者可以在 class 属性，但鼓励作者使用以下值： 描述内容的性质，而不是描述内容的值 所需的内容呈现方式。
13赞
Bhavin Solanki
7/15/2016
#18
元素的唯一标识符。
文档中不得有多个元素具有相同的 id 值。
任何字符串，但有以下限制：
- 长度必须至少为一个字符
不得包含任何空格字符：
- U+0020 空间
- U+0009 字符制表（选项卡）
- U+000A 换行 （LF）
- U+000C 进形 （FF）
- U+000D 回车 （CR）
使用 except 字符可能会导致兼容性问题，因为 中不允许使用它们。虽然这个限制已经取消，但为了兼容，ID应该以字母开头。ASCII letters and digits, '_', '-' and '.'HTML 4HTML 5
11赞
Tazwar Utshas
11/12/2016
#19
任何字母数字值，“-”和“_”都有效。但是，您应该以 A-Z 或 a-z 之间的任何字符开头 id 名称。
评论
0赞
Peter Mortensen
8/8/2021
但在 HTML5 中不是必需的？请参阅之前的答案。
8赞
Joel Wembo
5/9/2017
#20
没有空格，并且必须至少以从 a 到 z 和 0 到 9 的字符开头。
7赞
Dev pokhariya
6/14/2019
#21
在 HTML 中
ID 应以 {A-Z} 或 {a-z} 开头。您可以添加数字、句点、连字符、下划线和冒号。
例如：
<span id="testID2"></span>
<span id="test-ID2"></span>
<span id="test_ID2"></span>
<span id="test:ID2"></span>
<span id="test.ID2"></span>
但是，即使您可以使用冒号（:)或句点（）来制作ID。CSS 很难将这些 ID 用作选择器。主要是当您想使用伪元素 （ 和 ） 时。.:before:after
同样在 JavaScript 中，很难选择这些 ID。 因此，您应该使用前四个 ID 作为许多开发人员的首选方式，如果有必要，您也可以使用后两个 ID。
6赞
Jyotirmoy Bhattacharyya
7/7/2019
#22
Walues 可以是：[a-z]、[A-Z]、[0-9]、[* _ ： -]
它用于HTML5...
我们可以添加带有任何标签的 id。
10赞
NVRM
9/8/2019
#23
从 ES2015 开始，如果文档字符集设置为 UTF-8，我们也可以使用几乎所有的 Unicode 字符作为 ID。
在这里测试：https://mothereff.in/js-variables
阅读相关内容：ES2015 中的有效 JavaScript 变量名称
在 ES2015 中，标识符必须以 $、_ 或任何带有 Unicode 派生的核心属性ID_Start。
标识符的其余部分可以包含 $、_、U+200C 零宽度 非联接器、U+200D 零宽度联接器或任何带有 Unicode 的符号 派生核心属性ID_Continue。
const target = document.querySelector("div").id
console.log("Div id:", target )
document.getElementById(target).style.background = "chartreuse"div {
border: 5px blue solid;
width: 100%;
height: 200px
}<div id="H̹̙̦̮͉̩̗̗ͧ̇̏̊̾Eͨ͆͒̆ͮ̃͏̷̮̣̫̤̣Cͯ̂͐͏̨̛͔̦̟͈̻O̜͎͍͙͚̬̝̣̽ͮ͐͗̀ͤ̍̀͢M̴̡̲̭͍͇̼̟̯̦̉̒͠Ḛ̛̙̞̪̗ͥͤͩ̾͑̔͐ͅṮ̴̷̷̗̼͍̿̿̓̽͐H̙̙̔̄͜"></div>你应该使用它吗？可能不是一个好主意！
阅读相关内容：JavaScript：“函数体后缺少语法错误 } ”
评论
0赞
Michael
3/4/2023
有没有办法迭代有效的标识符？
2赞
Danny '365CSI' Engelman
3/12/2021
#24
救命，我的 Javascript 坏了！
每个人都说 ID 不能重复。
最好在所有浏览器中尝试，但 FireFox
<div id="ONE"></div>
<div id="ONE"></div>
<div id="ONE"></div>
<script>
document.body.append( document.querySelectorAll("#ONE").length , ' DIVs!')
document.body.append( ' in a ', typeof ONE )
console.log( ONE ); // a global var !!
</script>解释
世纪之交后，Microsoft拥有90%的浏览器市场份额，
并实施了从未标准化的浏览器行为：
1. 为每个 ID 创建全局变量
2. 为重复的 ID 创建一个数组
所有后来的浏览器供应商都复制了此行为，否则他们的浏览器将不支持较旧的网站。
大约在 2015 年左右，Mozilla 删除了 2。来自 FireFox 和 1.仍然有效。
所有其他浏览器仍然执行 1.和 2.
我每天都在使用它，因为打字而不是帮助我更快地制作原型;我不在生产中使用它。ONEdocument.querySelector("#ONE")
0赞
baijugoradia
#25
Html 标识
id 属性指定其元素的唯一标识符 （ID）。
身份证件可以采用的形式没有其他限制;特别是，ID 可以仅由数字组成、以数字开头、下划线开头、仅由标点符号组成等。
元素的唯一标识符可用于多种用途，最明显的是作为使用片段链接到文档特定部分的一种方式，作为在编写脚本时以元素为目标的一种方式，以及作为从 CSS 设置特定元素样式的一种方式。
0赞
user15422104
4/4/2021
#26
- 大写和小写字母有效
- “_”和“-”也有效
- Numbers 表格有效
- 冒号 （，） 和句点 （.） 似乎有效
- 有趣的是，表情符号是有效的
0赞
K.H. Shihan Nuwanjith Udayanga
4/29/2023
#27
为 HTML 元素创建 id 属性有几条规则。
id 属性必须是唯一的。（任何两个元素都不应具有相同的 id 值）
例：-<h1 id="one">Heading One</h1>
<h1 id="two">Heading Two</h1>id 属性必须以字母、下划线 （_） 或连字符 （-）
开头 示例：-<li id="one">One</li>
<li id="_two">Two</li>
<li id="-three">Three</li>id 属性不能包含空格或任何其他特殊字符。
例：-<li id="one@one">One</li>
<li id="two%two">Two</li>
<li id="three#three">Three</li>
<li id="four&four">Three</li>
<li id="five five">Three</li>id 属性应该是有意义的，不应该太长或太短。
在 id 属性值中使用小写字母的良好做法。
评论
IDID**.**)<input id="me.name" />$("#me.name").val()<me>.name