logo标签列表

HTML：有效的id属性值？

html
2284
在创建 HTML 元素的 id 属性时，对于其值有哪些规则？
119
HTML5与之前的版本规范有所不同。我在这里解释了它：http://mathiasbynens.be/notes/html5-id-class - Mathias Bynens
5
我注意到 SharePoint 2010 分配了如下的值 - {8CC7EF38-31D8-4786-8C20-7E6D56E49AE2}-{E60CE5E2-6E64-4350-A884-654B72DA5A53}，用于动态生成的 Web 部件中的表格。在其中包含这种 ID 值的页面中，各种受欢迎的浏览器都不会出现错误。然而，通过 JavaScript 处理这样的 ID 值是棘手的 - http://mvark.blogspot.in/2012/07/building-dynamic-jquery-selector-for.html - mvark
4
HTML4和HTML5中对ID值的要求非常不同。以下是HTML5 ID规则的快速完整概述：https://dev59.com/83VD5IYBdhLWcg3wJIEK#31773673 - Michael Benjamin
6
请注意：按照某些答案所说，使用 jQuery 中的句号（“**.**”）会导致很多麻烦。例如，如果使用 <input id="me.name" />，然后调用 $("#me.name").val()，jQuery 将会寻找一个类为 .name 的 <me> 标签，而这并不是我们想要的结果！请谨慎使用。 - Can O' Spam
3
不用，你只需要像文档中所述一样转义特殊字符即可。请查看此在线演示。 - Álvaro González
显示剩余2条评论
27个回答
21

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

例如：

HTML

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

CSS（层叠样式表）

#maintenance\.instrumentNumber{word-wrap:break-word;}
3
连字符和下划线通常不需要转义。但是，有一个例外情况，即如果连字符出现在标识符的开头，并且后面紧跟另一个连字符（例如\--abc）或数字（例如\-123），则需要进行转义。 - MrWhite
19

根据HTML 4规范...

ID和NAME令牌必须以字母（[A-Za-z]）开头，并且可以后跟任意数量的字母、数字（[0-9]）、连字符（"-"）、下划线（"_"）、冒号（":"）和句点（"."）。

17

同时，永远不要忘记，ID是唯一的。一旦使用，ID值在文档中任何地方都不会再次出现。

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

另一方面，有class元素。与ID类似，它可以出现多次，但是该值可以一遍又一遍地重复使用。

13

元素的唯一标识符。

一个文档中不能有多个id值相同的元素。

任何字符串，需满足以下限制：

  1. 至少为一个字符长

  2. 不得包含空格字符：

    • U+0020 空格
    • U+0009 制表符 (tab)
    • U+000A 换行符 (LF)
    • U+000C 换页符 (FF)
    • U+000D 回车符 (CR)

使用除了ASCII字母、数字、下划线、破折号和句点以外的字符可能会导致兼容性问题，因为它们在HTML 4中是不允许的。虽然在HTML 5中已经取消了这个限制，但为了兼容性，ID应该以字母开头。

12

看起来，虽然冒号（:）和句点（.）在HTML规范中是有效的，但在CSS中作为id选择器无效，因此如果您打算将它们用于该目的，则最好避免使用它们。

1
@MathiasBynens 这个链接已经失效了。现在应该是 https://mothereff.in/css-escapes#0foo%23bar.baz%3Aqux - Oriol
2
如果你正确转义它们，它们就不会无效。请参见 https://mothereff.in/css-escapes#0foo%23bar.baz%3Aqux - Mathias Bynens
11

对于 HTML5:

元素的id属性值在其所属的文档子树中必须是唯一的，并且必须至少包含一个字符。该值不能包含任何空格字符。

至少一个字符，无空格。

这为使用带重音符号的字符等有效用例打开了大门。它也为我们提供了足够的弹药来自我毁灭，因为您现在可以使用会导致CSS和JavaScript出问题的id值，除非您非常小心。

你能否在你的答案中添加引用的参考文献？（但是没有“编辑：”，“更新：”或类似的内容-答案应该看起来像今天写的一样。） - Peter Mortensen
在HTML5中，我使用URL作为ID创建元素，可以通过将引荐URL添加为文档URL的哈希来定位该元素，浏览器会在页面加载时自动聚焦于该元素。 - KHAYRI R.R. WOULFE
11

任何字母数字值、"-"和"_"都是有效的。但是，你应该用A-Z或a-z之间的任何字符开始id名称。

但在HTML5中不需要吗？请参考之前的答案。 - Peter Mortensen
10
  1. id最适合用于命名布局的各个部分，因此不应该给ID和class相同的名称
  2. ID允许使用字母数字和特殊字符
  3. 但是避免使用# : . * !这些符号
  4. 不允许使用空格
  5. 不能以数字或连字符后跟数字开头
  6. 区分大小写
  7. 使用ID选择器比使用class选择器更快
  8. 对于长的CSS类或ID规则名称，请使用连字符"-"（下划线"_"也可以使用，但不利于SEO）
  9. 如果一个规则具有ID选择器作为其关键选择器，则不要将标签名称添加到规则中。由于ID是唯一的，添加标签名称会不必要地减慢匹配过程。
  10. 在HTML5中，id属性可以用于任何HTML元素，在HTML 4.01中，不能使用id属性的元素包括：<base>, <head>, <html>, <meta>, <param>, <script>, <style>, 和 <title>.
下划线也可以使用，但不利于SEO。搜索引擎从何时开始对CSS类或ID名称感兴趣了呢？ - Nick Rice
10
自从ES2015以来，如果文档字符集设置为UTF-8，我们也可以使用几乎所有Unicode字符作为ID。
在这里进行测试：https://mothereff.in/js-variables

Enter image description here

阅读相关内容：ES2015中有效的JavaScript变量名

在ES2015中，标识符必须以$、_或任何具有Unicode衍生核心属性ID_Start的符号开头。

标识符的其余部分可以包含$、_、U+200C零宽度非连接符、U+200D零宽度连接符或任何具有Unicode衍生核心属性ID_Continue的符号。

const target = document.querySelector("div").id

console.log("Div id:", target )

document.getElementById(target).style.background = "chartreuse"
div {
  border: 5px blue solid;
  width: 100%;
  height: 200px
}
<div id="H̹̙̦̮͉̩̗̗ͧ̇̏̊̾Eͨ͆͒̆ͮ̃͏̷̮̣̫̤̣Cͯ̂͐͏̨̛͔̦̟͈̻O̜͎͍͙͚̬̝̣̽ͮ͐͗̀ͤ̍̀͢M̴̡̲̭͍͇̼̟̯̦̉̒͠Ḛ̛̙̞̪̗ͥͤͩ̾͑̔͐ͅṮ̴̷̷̗̼͍̿̿̓̽͐H̙̙̔̄͜"></div>

你应该使用它吗？可能不是一个好主意！

阅读相关内容：JavaScript: "语法错误：函数体后缺少 }"

有没有一种方法可以迭代有效的标识符？ - Michael
8

不能有空格，必须以字母a到z和数字0到9中的至少一个字符开头。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接