ID

#id 选择器允许您通过引用 id HTML 属性来定位元素。类似于类属性在 CSS 中使用“点”（.）作为类名称的前缀，ID 属性以“井号”（#）为前缀，通常称为“哈希”或“磅符号”。

<header id="site-header"></header>

#header { /* this is the ID selector */
  background: #eee;
}

ID 属性值应该唯一。包含两个或多个相同 id 的 HTML 无法验证，并且会导致不可预测的结果。如果存在两个相同的 ID，CSS 仍然会匹配并对两者进行样式化。但是，JavaScript 在查询 ID 时，只会找到第一个并停止。

ID 选择器非常强大。它们具有非常高的特异性，通常写为 (0, 1, 0, 0)。使用它们应用的样式会覆盖仅使用标签或类的其他选择器。为了演示

Check out this Pen!

一个同时具有 ID 和类属性的段落正在被赋予相互矛盾的 CSS 规则；即使类选择器 (.reusable) 在 CSS 中位于 ID 选择器 (#unique) 下面（它通常会覆盖上面的样式“级联”），但段落仍然是红色的，因为 #unique 覆盖了由 .reusable 设置的蓝色。无限数量的类永远无法击败 ID 的特异性（尽管曾经出现过一个 bug，256 个类会击败一个 ID）。

高特异性和唯一性意味着使用 #id 是 CSS 的“核武器”：功能强大、不灵活且效果不成比例。在 CSS 中避免使用 #id 选择器被认为是一种最佳实践：在几乎所有情况下，使用类都更可取。

话虽如此，ID 属性在 CSS 之外有几个有价值的用途

• 为 JavaScript 提供独特的挂钩
• 带有 id 属性的元素可以通过锚标记定位，方法是将 href 属性设置为 id 值，并以 # 符号为前缀。点击该锚点链接将使当前页面重新聚焦到具有匹配 id 的元素上。这被称为“片段标识符”。
• 对于 HTML 中真正唯一的元素，例如表单元素，ID 可能对链接 label 和 input 很有用。

要点

• 有效的 #id 无法以数字开头，并且必须至少包含一个字符。 Unicode 的很大一部分是有效的 id 中的字符。
• id 属性和选择器区分大小写，并且必须在 HTML、CSS 和 JavaScript 中完全匹配

其他资源

• MDN 文档

浏览器支持

Chrome	Safari	Firefox	Opera	IE	Android	iOS
任何	任何	任何	任何	任何	任何	任何