id

id 全局属性 定义了一个标识符(ID),该标识符在整个文档中必须是唯一的。其目的是在链接(使用 片段标识符)、编写脚本或样式化(使用 CSS)时识别元素。

¥The id global attribute defines an identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS).

Try it

警告:该属性的值是一个不透明的字符串:这意味着网络作者不应该依赖它来传达人类可读的信息(尽管让你的 ID 具有一定程度的人类可读性可能有助于代码理解,例如考虑 ticket-18659r45tgfe-freds&$@)。

¥Warning: This attribute's value is an opaque string: this means that web authors should not rely on it to convey human-readable information (although having your IDs somewhat human-readable can be useful for code comprehension, e.g. consider ticket-18659 versus r45tgfe-freds&$@).

id 的值不得包含 whitespace(空格、制表符等)。浏览器将包含空格的不合格 ID 视为空格是 ID 的一部分。与允许空格分隔值的 class 属性相反,元素只能有一个 ID 值。

¥An id's value must not contain whitespace (spaces, tabs, etc.). Browsers treat non-conforming IDs that contain whitespace as if the whitespace is part of the ID. In contrast to the class attribute, which allows space-separated values, elements can only have one single ID value.

从技术上讲,id 属性的值可以包含除 whitespace 字符之外的任何字符。但是,为了避免无意的错误,应仅使用 ASCII 字母、数字、'_''-',并且 id 属性的值应以字母开头。

¥Technically, the value for an id attribute may contain any character, except whitespace characters. However, to avoid inadvertent errors, only ASCII letters, digits, '_', and '-' should be used, and the value for an id attribute should start with a letter.

例如,. 在 CSS 中具有特殊含义(它以 类选择器 开头)。虽然有效,但除非你在用作 CSS 选择器的一部分时小心对其进行转义,否则它不会被识别为元素的 id 的一部分。这同样适用于 querySelector()querySelectorAll() 参数,它们使用相同的选择器语法。很容易忘记这样做,从而导致代码中出现难以检测的错误。

¥For example, . has a special meaning in CSS (it starts a class selector). While valid, unless you are careful to escape it when used as part of a CSS selector, it won't be recognized as part of the element's id. The same applies to the querySelector() and querySelectorAll() parameters, which use the same selector syntax. It is easy to forget to do this, resulting in bugs in your code that could be hard to detect.

同样,以数字开头(例如 1234-322-678)或连字符后跟数字(例如 -123)的 id 尽管在 HTML 中有效,但在 CSS、JavaScript 和 Web API 中使用时可能会导致问题:

¥Similarly, an id starting with a digit (E.g., 1234-322-678) or a hyphen followed by a digit (E.g., -123), though valid in HTML, may lead to problems when used in CSS, JavaScript, and Web APIs:

  • CSS ID 选择器 接受任何 CSS 标识符。如果 id 以数字或紧随其后的一个连字符开头,则连字符和数字都必须在 CSS 中转义。例如,虽然 id="544-383-3388"id="-3Pi" 在 HTML 中有效,但 id 选择器必须进行转义。具有这些 id 值的元素可以在 CSS 中使用 #\35 44-383-3388#\2D \33 pi 进行定位。
  • 任何有效的 HTML id 值都可以作为 CSS 和 JavaScript 中的属性选择器。选择器 [id="544-383-3388"][id="-3Pi"] 有效。
  • Document.querySelector() 和使用 CSS 选择器样式查询的类似方法将找不到它们,除非你转义它们。(请参阅此 page 作为示例。)
  • 这样的 id 不是有效的 JavaScript 标识符。带 ID 的元素成为全局属性,但不能使用非标识符全局属性作为全局变量 - 1234 不是全局变量,必须使用 window[1234] 来获取具有 id="1234" 的元素。这有点不方便,因为你必须通过额外的步骤创建变量:const element = window[1234]

规范

Specification
HTML Standard
# global-attributes:the-id-attribute-2

¥Specifications

浏览器兼容性

BCD tables only load in the browser

¥Browser compatibility

也可以看看

¥See also