CSS选择器：Id与Class详解
通俗易懂的CSS选择器指南，适合编程初学者
ID选择器
什么是ID选择器？
ID选择器 用于选择具有特定ID属性的HTML元素。在一个HTML文档中，每个ID应该是唯一的。
#unique-header
如何使用？
在CSS中，ID选择器以 # 符号开头，后面跟着ID名称：
/* CSS样式 */
#main-header {
background-color: navy;
color: white;
padding: 20px;
}
在HTML中，给元素添加id属性：
<header id=”main-header”>
网站主标题
</header>
关键特点
- 唯一性：一个ID在一个HTML文档中只能使用一次
- 高优先级：ID选择器的优先级高于类选择器和元素选择器
- JavaScript访问：JavaScript可以通过 document.getElementById() 轻松访问
- 锚点链接：可以创建页面内的导航链接（如 #section2）
使用场景
- 页面顶部导航栏
- 主要的布局区块（如头部、主体、页脚）
- 在整个页面中只出现一次的重要元素
- 需要被JavaScript操作的特定元素
Class选择器
什么是Class选择器？
Class选择器 用于选择具有特定类名的HTML元素。同一个类可以应用到多个元素上。
.warning
.btn
.card
如何使用？
在CSS中，类选择器以 . 开头，后面跟着类名称：
/* CSS样式 */
.warning {
background-color: yellow;
border: 2px solid orange;
padding: 15px;
}
在HTML中，给元素添加class属性：
<div class=”warning”>
这是一个警告信息！
</div>
<p class=”warning”>
另一个警告段落
</p>
关键特点
- 可复用性：同一个类可以应用到多个元素上
- 多重类：一个元素可以有多个类（空格分隔）
- 优先级中等：优先级高于元素选择器但低于ID选择器
- 模块化：可以创建可重用的样式组件（如按钮、卡片等）
使用场景
- 样式相同的多个元素（如按钮、卡片）
- 状态样式（如激活、禁用、警告状态）
- 需要组合多个样式的元素
- 创建可重用的样式组件
多重类示例
一个元素可以同时应用多个类：
/* CSS样式 */
.btn {
padding: 10px 20px;
border: none;
border-radius: 4px;
}
.btn-primary {
background-color: blue;
color: white;
}
.btn-large {
font-size: 1.2rem;
padding: 15px 30px;
}
<button class=”btn btn-primary”>主要按钮</button>
<button class=”btn btn-primary btn-large”>大型主要按钮</button>
ID选择器 vs Class选择器
| 对比点 | ID选择器 | Class选择器 |
|---|---|---|
| 符号 | # (如 #header) | . (如 .container) |
| 唯一性 | 唯一（一个页面只能出现一次） | 可重复使用（多个元素可使用相同类） |
| 优先级 | 高（100） | 中（10） |
| 元素使用数量 | 一个元素只能有一个ID | 一个元素可以有多个类 |
| JavaScript访问 | document.getElementById() | document.getElementsByClassName() |
| 最佳使用场景 | 页面唯一元素（导航、页脚） | 可复用组件（按钮、卡片） |
| 推荐程度 | 谨慎使用（避免过度依赖） | 广泛使用（最佳实践） |
组合使用示例
/* CSS样式 */
#main-content .article {
margin-bottom: 30px;
padding: 20px;
background: white;
}
#main-content .article.featured {
border: 3px solid gold;
}
<div id=”main-content”>
<article class=”article”>普通文章</article>
<article class=”article featured”>精选文章</article>
</div>