为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是唯一的。

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

其他回答

连字符、下划线、句点、冒号、数字和字母都适用于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>

对于HTML5:

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

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

这为使用重音字符等有效用例打开了大门。这也为我们提供了更多的弹药,因为除非你非常小心,否则你现在可以使用id值,这会导致CSS和JavaScript出现问题。

救命,我的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”)帮助我更快地创建原型;我不在生产中使用它。

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

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

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

jQuery不处理任何有效的ID名称。你只需要转义元字符(例如,点、分号、方括号…)

var name = 'O'Hara';

jQuery API中的选择器(请参见底部注释)