为HTML元素创建id属性时,该值有哪些规则?
当前回答
Html ID
id属性指定其元素的唯一标识符(id)。
身份证的形式没有其他限制;特别是,ID可以仅由数字组成,以数字开头,以下划线开头,仅由标点符号组成,等等。
元素的唯一标识符可以用于多种用途,最明显的是作为使用片段链接到文档的特定部分的方式,作为编写脚本时以元素为目标的方式,以及根据CSS对特定元素进行样式设置的方式。
其他回答
从技术上讲,可以在id/name属性中使用冒号和句点,但我强烈建议避免两者。
在CSS(以及jQuery等几个JavaScript库)中,句点和冒号都有特殊含义,如果不小心就会遇到问题。句点是类选择器,冒号是伪选择器(例如,当鼠标悬停在元素上时,元素的“:hover”)。
如果给元素id为“my.ccool:thing”,则CSS选择器将如下所示:
#my.cool:thing { ... /* some rules */ ... }
也就是说,在CSS中,“id为‘my’的元素、‘cool’类和‘thing’伪选择器”。
任何大小写、数字、下划线和连字符都要使用A-Z。如上所述,确保您的ID是唯一的。
这应该是你最关心的问题。
此外,永远不要忘记ID是唯一的。一旦使用,ID值可能不会再次出现在文档中的任何位置。
您可能有许多ID,但所有ID都必须具有唯一的值。
另一方面,还有class元素。就像ID一样,它可以出现多次,但值可能会被反复使用。
自ES2015以来,如果文档字符集设置为UTF-8,我们也可以使用几乎所有的Unicode字符作为ID。
在此测试:https://mothereff.in/js-variables
阅读:ES2015中有效的JavaScript变量名
在ES2015中,标识符必须以$、_或任何带有Unicode派生的核心属性ID_Start。标识符的其余部分可以包含$、_、U+200C零宽度非连接符、U+200D零宽度连接符或任何Unicode符号派生的核心属性ID_Continue。
const target=document.querySelector(“div”).idconsole.log(“Div-id:”,目标)document.getElementById(目标).style.background=“chartreuse”第二部分{边框:5px蓝色实心;宽度:100%;高度:200px}<div id=“H̹̙̦̮͉̩̗ͻͧ̏̾Eͨ͆͒̆ͮ͏̷̰̣̫̤C͈̻ͯ͐O̜͎͍878;͐͗ͤ781;͢M̡̲̭͍͇̼̟̯̦̉̒͠Ḛ̛̙̞̪̗ͥͤͩ̾͑̔͐ͅṮ“”</div>
你应该使用它吗?可能不是个好主意!
阅读:JavaScript:“函数体后面缺少语法错误}”
HTML5
请记住,ID必须是唯一的,即文档中不能有多个元素具有相同的ID值。
HTML5中关于ID内容的规则是(除了唯一性之外):
此属性的值不能包含空格。[...]虽然HTML5中取消了这一限制,但为了兼容性,ID应该以字母开头。
这是关于ID的W3规范(来自MDN):
任何字符串,具有以下限制:必须至少有一个字符长不能包含任何空格字符以前版本的HTML对ID值的内容设置了更大的限制(例如,它们不允许ID值以数字开头)。
更多信息:
W3-全局属性(id)MDN属性(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。将其视为历史脚注。
推荐文章
- 使伸缩项目正确浮动
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何触发自动填充在谷歌Chrome?
- 创建圈div比使用图像更容易的方法?
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?
- 如何删除和清除所有的本地存储数据
- 强制打开“另存为…”弹出打开文本链接点击PDF在HTML
- 如何修改标签文本?
- 在HTML中还有其他有用的空格码吗,比如半空格的 , em-spaces, en-spaces等等?
- 输入触发器按钮单击