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


当前回答

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

在CSS(以及jQuery等几个JavaScript库)中,句点和冒号都有特殊含义,如果不小心就会遇到问题。句点是类选择器,冒号是伪选择器(例如,当鼠标悬停在元素上时,元素的“:hover”)。

如果给元素id为“my.ccool:thing”,则CSS选择器将如下所示:

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

也就是说,在CSS中,“id为‘my’的元素、‘cool’类和‘thing’伪选择器”。

任何大小写、数字、下划线和连字符都要使用A-Z。如上所述,确保您的ID是唯一的。

这应该是你最关心的问题。

其他回答

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

在CSS(以及jQuery等几个JavaScript库)中,句点和冒号都有特殊含义,如果不小心就会遇到问题。句点是类选择器,冒号是伪选择器(例如,当鼠标悬停在元素上时,元素的“:hover”)。

如果给元素id为“my.ccool:thing”,则CSS选择器将如下所示:

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

也就是说,在CSS中,“id为‘my’的元素、‘cool’类和‘thing’伪选择器”。

任何大小写、数字、下划线和连字符都要使用A-Z。如上所述,确保您的ID是唯一的。

这应该是你最关心的问题。

HTML5:

它消除了对id属性的额外限制(请参见此处)。剩下的唯一要求(除了文件中的唯一要求)是:

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


HTML5之前:

ID应匹配:

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

必须以A-Z或A-Z字符开头可以包含-(连字符)、_(下划线)、:(冒号)和。(期间)

但我们应该避免:和。因为:

例如,一个ID可以被标记为“a.b:c”,并在样式表中被引用为#a.b:cc,但除了作为元素的ID之外,它还可以表示ID“a”、类“b”、伪选择器“c”。最好避免混淆,远离使用。和:总计。

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

HTML5

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

HTML5中关于ID内容的规则是(除了唯一性之外):

此属性的值不能包含空格。[...]虽然HTML5中取消了这一限制,但为了兼容性,ID应该以字母开头。

这是关于ID的W3规范(来自MDN):

任何字符串,具有以下限制:必须至少有一个字符长不能包含任何空格字符以前版本的HTML对ID值的内容设置了更大的限制(例如,它们不允许ID值以数字开头)。

更多信息:

W3-全局属性(id)MDN属性(id)

大写和小写字母有效“_”和“-”也有效数字有效冒号(,)和句点(.)似乎有效有趣的是,表情符号起作用