一、元素选择器（标签选择器）
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>）。
