一、元素选择器（标签选择器）
1. 定义
通过 HTML 标签名 直接选择元素，是最基础的选择器。
2. 语法
css复制代码
标签名 {
属性: 值;
}
3. 示例
html复制代码
<style>
/* 选中所有 <p> 标签 */
p {
color: blue;
font-size: 16px;
}
/* 选中所有 <h1> 标签 */
h1 {
background-color: yellow;
}
</style>
<h1>标题会变黄底</h1>
<p>这段文字是蓝色，16像素</p>
<p>另一个段落也会生效</p>
4. 特点
- 优点：简单直接，适合全局样式（如统一段落字体）。
- 缺点：不够精准，会选中所有同名标签。
- 应用场景：统一页面基础样式（如重置默认边距）。
二、类选择器（Class 选择器）
1. 定义
通过 HTML 元素的 class 属性值选择元素，是 最灵活、最常用 的选择器。
2. 语法
css复制代码
.class名 {
属性: 值;
}
3. 示例
html复制代码
<style>
/* 选中所有 class="highlight" 的元素 */
.highlight {
background-color: pink;
padding: 10px;
}
/* 单独定制某个类的样式 */
.warning {
color: red;
border: 2px solid red;
}
</style>
<p class="highlight">这个段落有粉色背景</p>
<div class="highlight warning">这个容器同时有粉色背景和红色边框</div>
<button class="warning">警告按钮</button>
4. 特点
- 优点 ：
- 可重复使用：一个类可应用于多个元素。
- 组合灵活：一个元素可添加多个类（用空格分隔）。
- 应用场景：定义可复用的样式模块（如按钮样式、卡片样式）。
5. 重要规则
- 类名 不能以数字开头 （如
.1box是无效的）。 - 类名建议用 语义化命名 （如
.btn-primary比.red-button更好）。
三、ID 选择器
1. 定义
通过 HTML 元素的 id 属性值选择元素，用于选择 唯一 的特定元素。
2. 语法
css复制代码
#id名 {
属性: 值;
}
3. 示例
html复制代码
<style>
/* 选中 id="header" 的元素 */
#header {
height: 80px;
background-color: #333;
}
/* 选中 id="submit-btn" 的按钮 */
#submit-btn {
width: 200px;
background-color: green;
}
</style>
<div id="header">这是页面头部</div>
<button id="submit-btn">提交按钮</button>
4. 特点
- 优点：精准定位单个元素。
- 缺点 ：
- 不可重复：同一页面中
id值必须唯一。 - 优先级过高：容易导致样式难以覆盖（慎用！）。
- 不可重复：同一页面中
- 应用场景：唯一元素的样式（如页面头部、导航栏）。
四、三种选择器对比总结
| 特征 | 元素选择器 | 类选择器 | ID 选择器 |
|---|---|---|---|
| 语法 | p {} |
.class {} |
#id {} |
| 选中范围 | 所有同名标签 | 所有相同 class 的元素 | 唯一元素 |
| 复用性 | 全局生效 | 可重复使用 | 不可重复 |
| 优先级权重 | 1 | 10 | 100 |
| 适用场景 | 基础样式重置 | 通用样式模块 | 唯一元素定制 |
五、代码实战演示
html复制代码
<!DOCTYPE html>
<html>
<head>
<style>
/* 1. 元素选择器：选中所有 <h2> 标签 */
h2 {
color: gray; /* 默认文字颜色为灰色 */
text-decoration: underline; /* 添加下划线 */
}
/* 2. 类选择器：选中所有 class="box" 的元素 */
.box {
width: 200px;
height: 100px;
border: 2px solid black; /* 黑色实线边框 */
margin: 20px; /* 外边距 */
padding: 10px; /* 内边距 */
background-color: lightblue; /* 浅蓝色背景 */
}
/* 3. 类选择器叠加：选中同时有 class="box" 和 "special" 的元素 */
.box.special {
background-color: pink; /* 粉色背景（覆盖之前的浅蓝色） */
border-color: red; /* 边框颜色改为红色 */
}
/* 4. ID选择器：选中 id="main-title" 的元素 */
#main-title {
color: darkblue; /* 文字颜色改为深蓝色（覆盖元素选择器的灰色） */
font-size: 24px; /* 字体放大 */
text-decoration: none; /* 移除下划线 */
}
</style>
</head>
<body>
<!-- h2 标题（应用元素选择器样式） -->
<h2>普通标题（元素选择器生效）</h2>
<!-- h2 标题（同时应用元素选择器和 ID 选择器样式） -->
<h2 id="main-title">主标题（ID 选择器覆盖元素选择器）</h2>
<!-- div 容器（应用类选择器样式） -->
<div class="box">普通容器（类选择器生效）</div>
<!-- div 容器（同时应用两个类选择器样式） -->
<div class="box special">特殊容器（叠加类选择器样式）</div>
</body>
</html>
代码逐行解析
1. 元素选择器 h2
css复制代码
h2 {
color: gray;
text-decoration: underline;
}
- 作用 ：所有
<h2>标题文字为灰色，带下划线。 - 页面效果 ：
- 第一个
<h2>（普通标题）：灰色文字 + 下划线。 - 第二个
<h2 id="main-title">：由于 ID 选择器的优先级更高，文字颜色被覆盖为深蓝色，下划线被移除。
- 第一个
2. 类选择器 .box
css复制代码
.box {
width: 200px;
height: 100px;
border: 2px solid black;
margin: 20px;
padding: 10px;
background-color: lightblue;
}
- 作用 ：所有
class="box"的容器为浅蓝色背景，黑色边框，尺寸固定，有内外边距。 - 页面效果 ：
- 第一个
<div class="box">：浅蓝色背景 + 黑色边框。 - 第二个
<div class="box special">：由于叠加了.box.special类，背景变为粉色，边框变红色。
- 第一个
3. 类选择器叠加 .box.special
css复制代码
.box.special {
background-color: pink;
border-color: red;
}
- 作用 ：只有同时拥有
class="box"和class="special"的容器，背景变为粉色，边框红色。 - 关键点 ：多个类名用空格分隔（如
<div class="box special">）。
4. ID 选择器 #main-title
css复制代码
#main-title {
color: darkblue;
font-size: 24px;
text-decoration: none;
}
- 作用 ：
id="main-title"的标题文字为深蓝色，24像素，无下划线。 - 优先级 ：ID 选择器优先级高于元素选择器，因此覆盖了
<h2>的灰色文字和下划线。
浏览器效果预览
| 元素 | 效果 |
|---|---|
第一个 <h2> |
灰色文字 + 下划线 |
第二个 <h2 id="main-title"> |
深蓝色文字 + 24px 字号 + 无下划线（ID 选择器覆盖元素选择器） |
第一个 <div class="box"> |
浅蓝色背景 + 黑色边框 + 固定尺寸（类选择器生效） |
第二个 <div class="box special"> |
粉色背景 + 红色边框（叠加类选择器生效） |
六、选择器使用建议
- 优先使用类选择器：灵活可控，适合大多数场景。
- 慎用 ID 选择器：除非需要精准定位唯一元素，否则避免使用（优先级过高易引发问题）。
- 避免过度依赖元素选择器 ：除非需要全局统一样式（如
body、p基础设置）。 - 组合使用 ：可通过叠加选择器提高精准度（如
div.highlight选中带有highlight类的<div>）。