为HTML元素创建id属性时,该值有哪些规则?
当前回答
严格来说,它应该匹配
[A-Za-z][-A-Za-z0-9_:.]*
但是jQuery似乎有冒号的问题,所以最好避免使用冒号。
其他回答
连字符、下划线、句点、冒号、数字和字母都适用于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>
救命,我的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属性,但鼓励作者使用描述内容的性质,而不是描述内容的期望呈现。
ID最适合命名布局的部分,因此不应为ID和类指定相同的名称ID允许字母数字和特殊字符但避免使用#:.*!符号不允许空格不是以数字或连字符开头,后跟数字区分大小写使用ID选择器比使用类选择器更快对于长CSS类或Id规则名称,也可以使用连字符“-”(下划线“_”,但这不利于SEO)如果规则有一个ID选择器作为其键选择器,则不要将标记名称添加到规则中。由于ID是唯一的,因此添加标记名会不必要地减慢匹配过程。在HTML5中,id属性可以用于任何HTML元素,而在HTML4.01中,id特性不能用于:<base>、<head>、<HTML>、<meta>、<param>、<script>、<style>和<title>。
要引用带句点的id,需要使用反斜杠。我不确定连字符或下划线是否相同。
例如:
HTML
<div id="maintenance.instrumentNumber">############0218</div>
CSS
#maintenance\.instrumentNumber{word-wrap:break-word;}