小开

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

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

小开

严格来说应该匹配

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

但是jQuery似乎有冒号的问题，所以最好避免它们。

小开

从超文本标记语言4规范…

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

小开

在实践中，许多站点使用id属性以数字开头，即使这在技术上不是有效的超文本标记语言。

超文本标记语言5草案规范放松了id和name属性的规则：它们现在只是不透明的字符串，不能包含空格。

小开

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

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

另一方面，还有class元素。就像ID一样，它可以出现很多次，但该值可能会一遍又一遍地使用。

小开

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

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

如果你给一个元素id“my.cool：东西”，你的CSS选择器将如下所示：

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

这实际上是说，“具有'my'id的元素，一类'酷'和'东西'伪选择器”在CSS语言中。

对于任何大小写字母，数字，下划线和连字符都要使用A-Z。如上所述，确保你的id是唯一的。

这应该是你的第一个问题。

小开

最佳答案

对于超文本标记语言4，从技术上讲答案是：

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

超文本标记语言5甚至更宽松，只说一个id必须包含至少一个字符，并且不能包含任何空格字符。

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

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

例如，超文本标记语言声明<div id="first.name"></div>是有效的。您可以在CSS中选择该元素为#first\.name，在jQuery中选择该元素，如下所示：$('#first\\.name').但是如果您忘记了反斜杠$('#first.name')，您将有一个完全有效的选择器来查找具有idfirst并且具有classname的元素。这是一个容易忽略的bug。从长远来看，您可能会更高兴选择idfirst-name（连字符而不是句点），而不是。

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

一个现在非常模糊的问题是，至少有一个浏览器，Netscape 6，错误地将id属性值视为区分大小写。这意味着如果你在超文本标记语言中输入id="firstName"（小写'f'），在CSS中输入#FirstName { color: red }（大写'F'），那个有错误的浏览器将无法将元素的颜色设置为红色。在2015年4月进行此编辑时，我希望你没有被要求支持Netscape 6。把这看作一个历史脚注。

小开

jQuery确实处理任何有效的ID名称。你只需要转义元字符（即点、分号、方括号…）。这就像说JavaScript有引号问题只是因为你不会写

var name = 'O'Hara';

jQuery API中的选择器（见底部注释）

小开

看来，虽然冒号（：）和句点（.）在超文本标记语言规范中是有效的，但它们在css中作为id选择器是无效的，因此如果您打算为此目的使用它们，最好避免使用它们。

小开

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

小开

字母→大写&小

数字→0-9

特殊字符 → ':', '-', ' _ ', '.'

格式应从“.”或字母开始，后跟更多字母或数字的特殊字符。id字段的值不得以“_”结束。

此外，不允许使用空格，如果提供，它们将被视为不同的值，这在id属性的情况下无效。

小开

HTML5：

它摆脱了对id属性（在这里看到）的额外限制。剩下的唯一要求（除了在文档中是唯一的）是：

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

Pre-HTML5：

ID应匹配：

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

必须开始带有A-Z或a-z字符
可能包含-（连字符），_（下划线），:（冒号）和.（句点）

但是应该避免:和.，因为：

例如，一个ID可以标记为“a. b： c”，并在样式表中引用为#a. b： c，但除了作为元素的id之外，它还可能意味着id“a”、class“b”、伪选择器“c”。最好避免混淆，不要同时使用.和:。

小开

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

小开

对于HTML5：

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

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

这为有效的用例打开了大门，例如使用重音字符。它还为我们提供了更多的弹药来射击自己的脚，因为您现在可以使用id值，除非您非常小心，否则这些值会导致CSS和JavaScript出现问题。

小开

HTML5

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

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

此属性的值不得包含空格。[…]虽然这个限制在超文本标记语言5中被取消，但为了兼容，ID应该以字母开头。

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

任何字符串，但有以下限制：
必须至少有一个字符长
不能包含任何空格字符
以前版本的超文本标记语言对ID值的内容施加了更大的限制（例如，它们不允许ID值以数字开头）。

HTML5：ID和Class属性的允许值

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

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

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

所以值可以是所有数字，只有一个数字，只是标点符号，包括特殊字符，等等。只是没有空格。这与HTML4非常不同。

在超文本标记语言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.1id属性

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

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

注意：对于ID可以采取的形式没有其他限制；在特别是，ID可以仅由数字组成，以数字开头，开始带有下划线，仅由标点符号等组成。

3.2.5.7class属性

如果指定了属性，则必须具有一个值，该值是一组空格分隔的标记，表示元素属于.

超文本标记语言元素分配给它的类包括类属性的值拆分时返回的类空格。（重复的被忽略。）

对于作者可以使用的令牌没有额外的限制类属性，但鼓励作者使用描述内容的性质，而不是描述内容的值内容的期望呈现。

小开

元素的唯一标识符。

文档中不能有多个元素具有相同的id值。

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

必须至少有一个字符长
不能包含任何空格字符：
- U+0020空间
- U+0009字符表（选项卡）
- U+000A线路送料（LF）
- U+000C形式饲料（FF）
- U+000D回车（CR）

使用除ASCII letters and digits, '_', '-' and '.'以外的字符可能会导致兼容性问题，因为它们在HTML 4中是不允许的。虽然这个限制在HTML 5中被取消了，但为了兼容性，ID应该以字母开头。

小开

任何字母数字值、“-”和“_”都是有效的。但是，您应该使用A-Z或a-z之间的任何字符启动id名称。

小开

没有空格，并且必须至少以从a到z和0到9的字符开头。

小开

超文本标记语言

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作为许多开发人员的首选方式，如果有必要，那么你也可以使用最后两个。

小开

可以是：[a-z]，[A-Z]，[0-9]，[*_：-]

它用于HTML5…

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

小开

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

Should you use it? Probably not a good idea!

Read about it: JavaScript: "Syntax error missing } after function body"

小开

救命，我的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>

补充说明

世纪之交后，微软拥有90%的浏览器市场份额，

并实现了从未标准化的浏览器行为：

1.为每个ID创建全局变量

2.为重复创建一个数组 ID

所有后来的浏览器供应商复制了这种行为，否则他们的浏览器将不支持旧站点。

2015年左右，Mozilla从FireFox中删除了2.，1.仍然有效。

所有其他浏览器仍然执行1和2。

我每天都使用它，因为输入ONE而不是document.querySelector("#ONE")可以帮助我更快地制作原型；我在生产中不使用它。

小开

Html ID

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

对于ID可以采取的形式没有其他限制；特别是，ID可以仅由数字组成，以数字开头，以下划线开头，仅由标点符号组成，等等。

元素的唯一标识符可用于各种目的，最明显的是作为使用片段链接到文档特定部分的一种方式，作为脚本时定位元素的一种方式，以及作为从CSS设置特定元素样式的一种方式。

小开

大写和小写字母都可以
'_'和'-'也行
数字有用
冒号（，）和句号（.）似乎有效
有趣的是表情符号有用

在超文本标记语言中id属性的有效值是什么？

HTML5：

Pre-HTML5：

HTML5

更多信息：

超文本标记语言

HTML5：ID和Class属性的允许值

补充说明