id选择器是CSS中用于选中页面中指定id属性元素的选择器，通过元素的id属性值来匹配对应的DOM节点，是前端样式开发和DOM操作中常用的选择器类型。
id选择器的基础语法结构
id选择器的核心语法是在目标元素的id属性值前添加井号#作为前缀，基本格式如下：
#id属性值 {
样式属性1: 属性值1;
样式属性2: 属性值2;
/* 其他样式定义 */
}
对应的HTML元素需要设置对应的id属性，示例如下：
<div id="header">这是页面头部区域</div>
此时CSS中#header选择器就会匹配到上述div元素，为其应用定义的样式。
id选择器的命名规范
id选择器的命名需要遵循以下规则，否则会导致选择器失效：
- id属性值必须以字母（A-Z、a-z）开头，后续可以跟字母、数字、下划线_、短横线-，不能使用数字作为开头。
- id属性值区分大小写，比如
#Header和#header是两个不同的选择器，对应不同的id值。 - 同一个页面中，id属性值必须是唯一的，不能出现两个元素拥有相同的id，这是HTML规范的要求，也是id选择器能精准匹配的前提。
- 不建议在id值中使用特殊字符，除了下划线和短横线之外的符号都可能导致选择器解析异常。
id选择器的使用限制
和其他选择器相比，id选择器有比较明确的使用限制：
- 一个元素只能设置一个id属性，不能同时设置两个及以上的id，比如
<div id="header header-nav"></div>这种写法是错误的。 - id选择器只能匹配单个元素，因为页面中id唯一，所以即使写了多个相同id的元素，浏览器也只会匹配到第一个，后续的元素不会被选中。
- id选择器的优先级高于类选择器和标签选择器，在样式冲突时，id选择器的样式会优先生效，优先级权重为100，远高于类选择器的10和标签选择器的1。
id选择器的搭配用法
id选择器可以和其他选择器组合使用，实现更精准的元素匹配：
和标签选择器组合
格式为标签名#id值，表示匹配指定标签且id为目标值的元素，示例如下：
/* 只匹配id为header的div元素，不匹配其他标签的id为header的元素 */
div#header {
background-color: #f5f5f5;
height: 60px;
}
和后代选择器组合
格式为#父id 后代选择器，表示匹配指定id元素内部的目标后代元素，示例如下：
/* 匹配id为header的元素内部的所有a标签 */
#header a {
color: #333;
text-decoration: none;
}
常见错误示例
以下是id选择器使用中的常见错误写法：
| 错误写法 | 错误原因 | 正确写法 |
|---|---|---|
.header {} | 使用了类选择器的点前缀，不是id选择器 | #header {} |
#123header {} | id值以数字开头，不符合命名规范 | #header123 {} |
#header nav {} | 如果页面有多个id为header的元素，只有第一个会生效 | 保证页面id唯一，或者使用类选择器替代 |
代码示例
完整的HTML和CSS示例如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>id选择器示例</title>
<style>
/* 基础id选择器 */
#main-content {
width: 1200px;
margin: 0 auto;
padding: 20px;
}
/* 和标签组合的选择器 */
p#intro {
font-size: 16px;
line-height: 1.8;
color: #666;
}
/* 和后代选择器组合 */
#main-content .section-title {
font-size: 20px;
font-weight: bold;
border-bottom: 1px solid #eee;
padding-bottom: 10px;
}
</style>
</head>
<body>
<div id="main-content">
<p id="intro">这是页面的介绍内容区域</p>
<h3 class="section-title">第一部分内容</h3>
<p>第一部分的具体内容</p>
</div>
</body>
</html>
上述代码中，#main-content会匹配到最外层的div元素，p#intro只会匹配到id为intro的p元素，#main-content .section-title会匹配到main-content内部的类为section-title的元素，符合id选择器的语法规则。
id_selectorCSSHTML前端开发修改时间：2026-06-12 04:12:19