下面是一份结构清晰、适合做技术专栏或学习笔记的内容。📒
【H5 前端开发笔记】第 16 期：CSS 选择器 (1) 核心语法规则、常见的选择器分类
在 CSS 中，选择器（Selector） 是非常重要的概念。
选择器的作用是 选择 HTML 元素并为其设置样式。
简单理解：
CSS = 选择元素 + 设置样式
本期重点：
1️⃣ CSS 选择器核心语法
2️⃣ 常见选择器分类
3️⃣ 基础选择器使用示例
一、CSS 选择器的基本语法
CSS 语法结构：
选择器 {
属性: 值;
}
示例：
p{
color:red;
font-size:18px;
}
含义：
选择所有 p 标签，并设置文字颜色为红色
二、CSS 选择器的作用
CSS 选择器用于 定位 HTML 元素。
例如：
HTML：
<p>第一段文字</p>
<p>第二段文字</p>
CSS：
p{
color:blue;
}
效果：
所有 p 标签变成蓝色
三、CSS 选择器分类
CSS 选择器大致可以分为以下几类：
| 类型 | 说明 |
|---|---|
| 基础选择器 | 标签、类、ID |
| 组合选择器 | 后代、子元素、兄弟 |
| 属性选择器 | 根据属性选择 |
| 伪类选择器 | 状态选择 |
| 伪元素选择器 | 特定内容 |
本期重点学习 基础选择器。
四、标签选择器（Element Selector）
标签选择器通过 HTML 标签名 来选择元素。
语法：
标签名{
样式
}
示例：
p{
color:red;
}
HTML：
<p>前端开发</p>
<p>学习CSS</p>
效果：
两个段落文字变成红色
特点：
- 会作用于 所有同类型标签
五、类选择器（Class Selector）
类选择器通过 class 属性 选择元素。
语法：
.类名{
样式
}
示例：
HTML：
<p class="text">Hello</p>
<p class="text">World</p>
CSS：
.text{
color:blue;
}
效果：
两个段落变成蓝色
特点：
- 可以 重复使用
- 是 开发中最常用的选择器
六、ID 选择器（ID Selector）
ID 选择器通过 id 属性 选择元素。
语法：
#id名{
样式
}
示例：
HTML：
<h1 id="title">网页标题</h1>
CSS：
#title{
color:green;
}
特点：
- 一个页面通常只使用一次
- 优先级比类选择器高
七、通配符选择器
通配符选择器可以选择 所有元素。
语法：
*{
样式
}
示例：
*{
margin:0;
padding:0;
}
作用：
清除浏览器默认样式
在项目中非常常见。
八、多个选择器组合
CSS 支持同时选择多个元素。
语法：
选择器1, 选择器2{
样式
}
示例：
h1, p{
color:red;
}
含义：
h1 和 p 同时应用样式
九、基础选择器优先级
不同选择器存在 优先级规则。
从低到高：
标签选择器 < 类选择器 < ID选择器
示例：
CSS：
p{
color:red;
}
.text{
color:blue;
}
#title{
color:green;
}
HTML：
<p id="title" class="text">Hello</p>
最终效果：
绿色
因为 ID 选择器优先级最高。
十、开发中的选择器建议
在实际开发中：
推荐使用：
类选择器
原因：
- 可复用
- 易维护
- 适合组件化开发
一般规则：
| 选择器 | 使用情况 |
|---|---|
| 标签选择器 | 少量使用 |
| 类选择器 | 最常用 |
| ID选择器 | 尽量少用 |
十一、本期总结
CSS 选择器作用：
选择 HTML 元素并设置样式
基础选择器：
| 选择器 | 示例 |
|---|---|
| 标签选择器 | p{} |
| 类选择器 | .box{} |
| ID选择器 | #header{} |
| 通配符 | *{} |
优先级规则：
标签 < 类 < ID
下一篇我们继续学习：
第 17 期：CSS 选择器 (2) 关系选择器（后代选择器 / 子选择器 / 相邻兄弟 / 通用兄弟）
这是 理解 CSS 布局和样式继承的关键内容，也是面试常考知识点。🚀
