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


当前回答

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

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

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

其他回答

要引用带句点的id,需要使用反斜杠。我不确定连字符或下划线是否相同。

例如:

HTML

<div id="maintenance.instrumentNumber">############0218</div>

CSS

#maintenance\.instrumentNumber{word-wrap:break-word;}

从技术上讲,可以在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格式

ID应以{A-Z}或{A-Z}开头。您可以添加数字、句点、连字符、下划线和冒号。

例如:

<span id="testID2"></span>
<span id="test-ID2"></span>
<span id="test_ID2"></span>
<span id="test:ID2"></span>
<span id="test.ID2"></span>

但是,即使您可以使用冒号(:)或句点(.)创建ID。CSS很难将这些ID用作选择器。主要是当您想要使用伪元素(:before和:after)时。

在JavaScript中,也很难选择这些ID。因此,您应该使用前四个ID作为许多开发人员的首选方式,如果有必要,您也可以使用后两个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。将其视为历史脚注。