CSS ID选择器的用法（附带实例）

CSS ID 选择器中的 ID 是英文“identity”的缩写，中文原意是“身份标识号码”，代表唯一的意思。

ID 选择器与类选择器相似。唯一的区别就是，在使用 ID 选择器选择时，使用“＃”号加自定义的类名而不是点号“.”加自定义类名。同时在 HTML 中使用 id 属性，然后赋予自定义的值。

示例代码如下：

<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <style>
    #i {
      color: yellow;
    }
  </style>
</head>
<body>
  <p>让 <span>天下</span> 没有 <span id="i">难学的</span> 技术。</p>
</body>
</html>

上述代码中，<span> 标签上定义了 id 属性，赋予自定义的值“i”。在 CSS 中使用 ID 选择器对自定义类名“i”设置了字体颜色。

运行代码查看效果，如下图所示：

图 1 测试ID选择器

本节的开头提及过 ID 是唯一的。在一个 HTML 文档中，id 属性的属性值仅能使用一次。这里需要为读者特别提及一点，实际上浏览器通常是不检查 HTML 中 id 的唯一性。也就是说设置了多个有相同 id 属性值的标签，也可能为这些标签应用相同的样式。但因为这种情况具有不确定性，因此在实际应用时，我们是非常不建议这样使用的。

下方代码在部分浏览器中是可以运行的，但是并不能保证代码都可以正常运行：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <style>
    #i {
      color: yellow;
    }
  </style>
</head>
<body>
  <p>让
    <span id="i">天下</span> 没有
    <span id="i">难学的</span> 技术。
  </p>
</body>
</html>

我们在 Google 浏览器中运行这段代码，是可以正常运行的。两个 <span> 标签中包含的文字都变为黄色。运行代码查看效果，如下图所示：

图 2 测试id不唯一的情况

CSS ID选择器的用法（附带实例）

相关文章