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