CSS id 选择器 - 绿叶网

在 CSS 中，我们可以为元素设置一个 id 属性，然后针对设置了这个 id 的元素定义 CSS 样式，这就是 id 选择器。

不过要注意一点，在同一个页面中，是不允许出现两个相同的 id 的。这个跟 “没有两个人的身份证号相同” 是一样的道理。

CSS id 选择器语法

在 CSS 中，我们可以使用 id 选择器来选取带有指定 id 的 HTML 元素。

语法：

#id 名称 {
    属性: 值 ;
}

说明：

对于 id 选择器，id 名前面必须要加上前缀 “#”，否则该选择器无法生效。id 名前面加上 “#”，表示这是一个 id 选择器。

CSS id 选择器

id 选择器一般用于需要独特样式的元素，比如页面中的导航栏、页脚或特定模块。虽然 id 选择器功能强大，但在现代 CSS 开发中，我们优先推荐使用 class 选择器。这是因为 class 选择器更能提高代码的复用性和可维护性。

对于 id 选择器，小伙伴们还需要注意以下几点。

id 属性在 HTML 文档中必须是唯一的，即同一个 id 值在同一个页面中只能使用一次。
id 名称应该语义化，尽量不要使用无意义的名称（如 id1、id2）。
id 名称会严格区分大小写，比如 #header 和 #Header 是两个不同的 id。在实际开发中，id 名称一般使用纯小写。
id 选择器的优先级高于类选择器和标签选择器，仅次于内联样式和 !important 声明。

提示: 不同选择器的优先级是不一样的，另请参阅：CSS 选择器优先级。

CSS id 选择器示例

接下来，我们通过一个简单的例子来讲解 CSS 如何使用 id 选择器来定义样式。

示例：id 选择器设置单个元素的样式

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        #unique {
            color: red;
        }
    </style>
</head>
<body>
    <div id="unique">绿叶网- 为好教程，全力以赴。</div>
    <div>绿叶网 - 为好教程，全力以赴。</div>
</body>
</html>

页面效果如下图所示。

CSS id 选择器示例

分析：

在这个例子中，我们为第一个 div 元素定义了一个 id（即 “unique”），然后在 CSS 中通过这个 id 来选中这个元素，并设置其文本颜色为红色，而另一个元素则不受影响。