CSS 选择器用于选择 HTML 元素并为其应用样式。理解选择器是学习 CSS 的核心基础。下面系统介绍 CSS 选择器的核心语法规则与常见分类，这些规则适用于现代浏览器实现的 CSS 标准。
一、CSS 选择器的核心语法规则
CSS 的基本语法结构：
选择器 {
属性: 值;
}
示例：
p {
color: red;
}
含义：
- p → 选择器（选择所有
<p>标签） - color → 属性
- red → 属性值
对应 HTML：
<p>Hello World</p>
页面文字会变成红色。
二、CSS 选择器分类
常见选择器主要分为 6 大类：
基础选择器
层级选择器
属性选择器
伪类选择器
伪元素选择器
组合选择器
下面逐一介绍。
三、基础选择器（最常用）
1 元素选择器（标签选择器）
直接选择 HTML 标签。
p {
color: blue;
}
作用：
选择所有 <p> 元素。
2 类选择器（Class Selector）
使用 . 选择类名。
.box {
background: yellow;
}
HTML：
<div class="box">内容</div>
特点：
- 一个类可以被多个元素使用
- 一个元素可以有多个类
示例：
<div class="box red"></div>
3 ID 选择器
使用 #。
#header {
font-size: 20px;
}
HTML：
<div id="header"></div>
特点：
- ID 唯一
- 页面中只出现一次
4 通配符选择器
选择所有元素。
* {
margin: 0;
padding: 0;
}
常用于：
CSS 初始化（reset）
四、层级选择器（关系选择器）
用于选择元素之间的结构关系。
1 后代选择器
div p {
color: red;
}
含义：
div 里面所有 p
HTML：
<div>
<p>匹配</p>
</div>
2 子元素选择器
div > p
只选择 直接子元素。
示例：
<div>
<p>匹配</p>
<section>
<p>不匹配</p>
</section>
</div>
3 相邻兄弟选择器
h1 + p
选择：
h1 后面紧挨的 p
4 通用兄弟选择器
h1 ~ p
选择：
h1 后面所有 p
五、属性选择器
根据 HTML 属性选择元素。
1 存在属性
input[type]
选择：
所有带 type 属性的 input
2 指定属性值
input[type="text"]
选择：
type=text 的 input
3 包含属性值
[class*="box"]
含义：
class 包含 box
4 以某值开头
[class^="box"]
5 以某值结尾
[class$="box"]
六、伪类选择器
伪类用于描述元素 状态。
1 :hover
鼠标悬停。
a:hover {
color: red;
}
2 :active
点击状态。
button:active {
background: gray;
}
3 :focus
输入框获取焦点。
input:focus {
border: 2px solid blue;
}
4 :nth-child()
选择第 n 个元素。
li:nth-child(2) {
color: red;
}
5 :first-child
p:first-child
6 :last-child
p:last-child
七、伪元素选择器
伪元素用于选择元素 部分内容。
1 ::before
在元素前插入内容。
p::before {
content: "★";
}
2 ::after
p::after {
content: "!";
}
3 ::first-letter
p::first-letter {
font-size: 30px;
}
4 ::first-line
p::first-line {
color: red;
}
八、组合选择器
可以同时使用多个选择器。
1 多选择器
h1, h2, h3 {
color: blue;
}
2 复合选择器
div.box
含义：
class=box 的 div
九、选择器优先级（非常重要）
CSS 存在 优先级规则（Specificity）。
优先级从高到低：
!important
inline style
ID选择器
类选择器
元素选择器
通配符
举例：
#title {color:red;}
.title {color:blue;}
HTML：
<h1 id="title" class="title"></h1>
最终颜色：
red
因为 ID 优先级更高。
十、总结
CSS 常见选择器：
| 类别 | 示例 |
|---|---|
| 元素选择器 | p |
| 类选择器 | .box |
| ID选择器 | #header |
| 后代选择器 | div p |
| 子选择器 | div > p |
| 属性选择器 | input[type="text"] |
| 伪类 | :hover |
| 伪元素 | ::before |
核心规则：
选择器 -> 找元素
属性 -> 改样式
如果你在学习 前端开发（HTML + CSS + JavaScript），我可以继续给你整理一份：
《CSS 选择器完全指南（20种选择器 + 面试重点）》
很多前端面试都会考这一部分。
