CSS ID选择器

ID选择器通过元素的 id 属性值选中唯一元素。

基本语法

CSS

#ID名 {
  属性: 值;
}

HTML 中使用 id 属性：

HTML

<div id="header">头部</div>
<div id="main">主体</div>
<div id="footer">底部</div>

使用示例

CSS

#header {
  background: #333;
  height: 60px;
}

#main {
  max-width: 1200px;
  margin: 0 auto;
}

#footer {
  padding: 20px;
  text-align: center;
}

/* ID与标签组合 */
div#sidebar {
  width: 300px;
}

特点

特性	说明
语法	以 `#` 开头
权重	权重值100（高）
唯一性	页面中 id 应唯一
覆盖能力	可覆盖类选择器样式

与类选择器对比

特性	ID选择器	类选择器
语法	`#id`	`.class`
权重	100	10
可重复性	不可（应唯一）	可重复使用
适用场景	唯一元素	通用样式

注意：id 在页面中应唯一，不建议用于样式复用，优先使用类选择器。

使用建议

CSS

/* 推荐：用于页面唯一结构 */
#header { }
#nav { }
#main { }
#footer { }

/* 不推荐：用于重复样式 */
#box1 { }
#box2 { }
#box3 { }

/* 更好的做法：使用类 */
.box { }

要点总结

ID选择器以 # 开头，匹配 id 属性
权重值100，优先级较高
id 应在页面中保持唯一
建议用于页面结构，样式复用优先用类选择器

存放路径：articles/CSS/入门/CSS选择器/CSS ID选择器.md