ID选择器在CSS中的写法非常直观：一个井号紧跟id名称。由于HTML规范要求同一个页面中的id属性值必须唯一，因此#id能够将样式规则锁定到唯一的目标元素上，而不会像类选择器那样同时作用在多个元素上。这种精确性使它在页面布局、锚点定位以及JavaScript操作中都有重要应用。
一、ID选择器的基本语法与工作方式
ID选择器的完整语法是在样式表中写上井号加名称：#header { ... }。这里的名称必须与HTML元素上的id属性值完全一致。CSS不允许id名称以数字开头，即使某些浏览器可能容忍，也应当避免。同时，id名称区分大小写，#Header和#header会被视为两个不同选择器。
举个例子，下面这段代码定义了一个ID为site-header的页面头部，并用#site-header设置背景和文字颜色：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>ID选择器示例</title>
<style>
#site-header {
background-color: #2c3e50;
color: #fff;
padding: 16px;
}
</style>
</head>
<body>
<header id="site-header">这是页面头部</header>
</body>
</html>
当浏览器解析到#site-header时，会根据DOM树查找具有相同id属性值的节点。由于id的唯一性约束，理论上最多只有一个节点命中。不过需要说明的是，如果页面中错误地出现了多个相同id，CSS选择器仍然可能给所有匹配节点应用样式，这也是需要避免的原因之一。
在实际项目中，ID选择器也常常与后代选择器组合使用，例如#main-nav a表示选择#main-nav内部的所有a元素。这种写法可以把样式范围限制在某个确定的容器中，既保留了ID选择器的精确入口，又能对内部结构做灵活定义。但要注意，组合后整体优先级会变得更高，后续覆盖成本也会增加。
二、ID选择器的优先级与覆盖机制
CSS的层叠规则决定了当多条规则同时作用于一个元素时，哪一条最终生效。计算优先级时，通常把选择器拆成三个计数位：ID选择器贡献第一位的数值，类选择器、属性选择器和伪类贡献第二位，元素选择器和伪元素贡献第三位。
因此，#notice的优先级为1,0,0，.notice为0,1,0，而p为0,0,1。数值的比较按位从左到右，ID选择器会天然压过类选择器和标签选择器，即便类规则在样式表中写得再靠后。
/* ID选择器优先级：1,0,0 */
#notice {
color: red;
}
/* 类选择器优先级：0,1,0 */
.notice {
color: blue;
}
/* 标签选择器优先级：0,0,1 */
p {
color: green;
}
在上述规则同时存在的情况下，一个带有id="notice"和class="notice"的段落元素最终会显示为红色，因为ID选择器的优先级最高。这说明ID选择器并不适合用来写可被局部覆盖的通用样式。
如果希望覆盖ID选择器定义的样式，通常可以采用内联样式，或者使用!important。内联样式的优先级高于所有非!important的选择器规则，而带有!important的用户代理或作者规则又会根据来源和顺序继续参与层叠。实际上，频繁依赖这两个手段来覆盖ID样式，往往意味着初始选择器设计不够合理。
三、ID选择器与class选择器的适用场景对比
虽然#id和.class在写法上只差一个符号，但它们的语义完全不同。id表示文档中的唯一标识，适合标记页面里只出现一次的结构，例如站点顶部导航、侧边栏、页脚或某个特定弹窗。class则表示一组具有相同特征的元素，更适合复用样式。
例如，一个页面通常只有一个主导航，所以可以写<nav id="main-nav">并通过#main-nav设置样式；而多个按钮需要统一外观，则应该使用<button class="btn">和.btn。这样可以避免为了多个按钮复制ID，也避免把唯一元素误写为可复用类导致语义模糊。
<!-- 适合ID：页面唯一的导航 --> <nav id="main-nav"> <a href="/">首页</a> <a href="/about">关于</a> </nav> <!-- 适合class：多个按钮复用样式 --> <button class="btn">提交</button> <button class="btn">取消</button>
另外，id还可以用于document.getElementById快速获取元素，这在行为交互上很方便。但CSS样式与JavaScript行为最好适度分离，不要因为JavaScript需要id就大量使用ID选择器。否则样式表的优先级会被拉高，后续做主题切换或局部调整时会遇到很多不必要的阻碍。
从维护角度看，推荐把id留给真正的页面级锚点或脚本钩子，把可复用的视觉规则交给class。这样既能保持HTML语义清晰，也能让CSS选择器保持较低的特殊性，方便后续扩展和覆盖。
四、常见的ID选择器使用误区与最佳实践
第一个误区是重复使用相同的id。HTML规范要求id在文档中唯一，重复id虽然未必让浏览器完全拒绝渲染，但会带来不可预测的CSS匹配和脚本行为。尤其是getElementById只会返回第一个匹配节点，后续元素可能永远无法被正确访问。
<!-- 错误：同一页面重复id --> <div id="card">第一张卡片</div> <div id="card">第二张卡片</div>
第二个误区是滥用ID来写样式，导致优先级过高。一旦用#content p这样的高优先级选择器，后面想对段落做局部调整就需要覆盖更大的优先级，甚至引入!important，使样式表越来越难以维护。
最佳实践是：把ID主要用于文档结构、锚点定位、表单label关联以及与JavaScript的绑定；而把样式复用交给class。如果某个元素确实唯一，并且需要保证它不被其他规则意外覆盖，才考虑在CSS中使用ID选择器。
/* 推荐：布局锚点用ID，组件样式用class */
#app {
max-width: 1200px;
margin: 0 auto;
}
.card {
border: 1px solid #e0e0e0;
border-radius: 6px;
padding: 16px;
}
总结来说，ID选择器是精确控制单个元素的高效工具，但需要遵循唯一性并克制使用。理解优先级和语义差异，才能写出清晰、可维护的CSS。