为HTML元素创建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>

其他回答

严格来说,它应该匹配

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

但是jQuery似乎有冒号的问题,所以最好避免使用冒号。

根据HTML 4规范:

ID和NAME标记必须以字母([a-Za-z])开头,后面可以是任意数量的字母、数字([0-9])、连字符(“-”)、下划线(“_”)、冒号(“:”)和句点(“.”)。

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

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

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

另一方面,还有class元素。就像ID一样,它可以出现多次,但值可能会被反复使用。

对于HTML 4,技术上的答案是:

ID和NAME标记必须以字母([a-Za-z])开头,后面可以是任意数量的字母、数字([0-9])、连字符(“-”)、下划线(“_”)、冒号(“:”)和句点(“.”)。

HTML5甚至更为宽松,只表示id必须至少包含一个字符,并且不能包含任何空格字符。

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

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

例如,HTML声明<div id=“first.name”></div>是有效的。您可以在CSS中将该元素选择为#first\.name,并在jQuery中选择为:$('#first\\name')。但是如果您忘记了反斜杠$('#first.name'),您将拥有一个完全有效的选择器来查找一个id优先且具有类名的元素。这是一个容易忽视的错误。从长远来看,选择id名(连字符而不是句点)可能会更快乐。

通过严格遵守命名约定,可以简化开发任务。例如,如果您将自己完全限制为小写字符,并且始终使用连字符或下划线分隔单词(但不能同时使用连字符和下划线,请选择其中一个,不要使用另一个),那么您就有了一个易于记忆的模式。你永远不会怀疑“是firstName还是firstName?”,因为你永远知道你应该输入first_name。更喜欢驼色?然后限制自己,不要使用连字符或下划线,并且始终对第一个字符使用大写或小写,不要混用它们。


现在一个非常模糊的问题是,至少有一个浏览器Netscape 6错误地将id属性值视为区分大小写。这意味着,如果您在HTML中键入id=“firstName”(小写'f'),在CSS中键入#firstName{color:red}(大写'f'),则错误浏览器将无法将元素的颜色设置为红色。在2015年4月进行编辑时,我希望您没有被要求支持Netscape 6。将其视为历史脚注。

Html ID

id属性指定其元素的唯一标识符(id)。

身份证的形式没有其他限制;特别是,ID可以仅由数字组成,以数字开头,以下划线开头,仅由标点符号组成,等等。

元素的唯一标识符可以用于多种用途,最明显的是作为使用片段链接到文档的特定部分的方式,作为编写脚本时以元素为目标的方式,以及根据CSS对特定元素进行样式设置的方式。