为HTML元素创建id属性时,该值有哪些规则?
当前回答
没有空格,并且必须至少以a到z和0到9之间的字符开头。
其他回答
从技术上讲,可以在id/name属性中使用冒号和句点,但我强烈建议避免两者。
在CSS(以及jQuery等几个JavaScript库)中,句点和冒号都有特殊含义,如果不小心就会遇到问题。句点是类选择器,冒号是伪选择器(例如,当鼠标悬停在元素上时,元素的“:hover”)。
如果给元素id为“my.ccool:thing”,则CSS选择器将如下所示:
#my.cool:thing { ... /* some rules */ ... }
也就是说,在CSS中,“id为‘my’的元素、‘cool’类和‘thing’伪选择器”。
任何大小写、数字、下划线和连字符都要使用A-Z。如上所述,确保您的ID是唯一的。
这应该是你最关心的问题。
根据HTML 4规范:
ID和NAME标记必须以字母([a-Za-z])开头,后面可以是任意数量的字母、数字([0-9])、连字符(“-”)、下划线(“_”)、冒号(“:”)和句点(“.”)。
一个常见的错误是使用以数字开头的ID。
救命,我的Javascript坏了!
每个人都说ID不能重复。
在除FireFox之外的所有浏览器中都试用过
<div id=“ONE”></div><div id=“ONE”></div><div id=“ONE”></div><脚本>document.body.append(document.querySelectorAll(“#ONE”).length,'DIV!')document.body.append('in',typeofONE)console.log(一);//全局变量!!</script>
解释
在世纪之交,微软拥有90%的浏览器市场份额,
并实施从未标准化的浏览器行为:
1.为每个ID创建全局变量
2.为重复ID创建数组
所有后来的浏览器供应商都复制了这种行为,否则他们的浏览器将不支持旧网站。
2015年左右,Mozilla删除了2。来自FireFox和1。仍然有效。
所有其他浏览器仍然支持1。和2。
我每天都使用它,因为键入ONE而不是document.querySelector(“#ONE”)帮助我更快地创建原型;我不在生产中使用它。
HTML5:ID和类属性的允许值
从HTML5开始,对ID值的唯一限制是:
必须在文档中唯一不能包含任何空格字符必须至少包含一个字符
类似的规则适用于类(当然,唯一性除外)。
所以值可以是所有数字,只有一个数字,只有标点符号,包括特殊字符等等。没有空格。这与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、正则表达式)中造成麻烦。
例如,以下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等级属性如果指定了属性,则该属性的值必须是表示元素属于。HTML元素分配给它的类包含所有类属性的值拆分时返回的类空间。(重复项被忽略。)作者可以在中使用的令牌没有其他限制class属性,但鼓励作者使用描述内容的性质,而不是描述内容的期望呈现。
任何字母数字值“-”和“_”都是有效的。但是,您应该以A-Z或A-Z之间的任何字符开始id名称。