CSS（层叠样式表）是网页设计中不可或缺的一部分，它通过选择器来定位 HTML 文档中的元素，并为这些元素定义样式。掌握 CSS 选择器是前端开发的核心技能之一。本文将从最基础的选择器讲起，逐步深入到高级、复杂的结构和伪类/伪元素选择器，帮助你全面掌握 CSS 选择器的使用。
一、什么是 CSS 选择器？
CSS 选择器是一种模式，用于匹配文档树中的一个或多个元素。通过选择器，你可以精确地控制哪些 HTML 元素应该应用特定的样式规则。
例如：
p {
color: red;
}
这里的p就是一个选择器，表示选中文档中所有的<p>标签并为其设置红色字体颜色。
二、基础选择器
1. 元素选择器
根据标签名选择元素。
div {
width: 100%;
}
2. 类选择器
以 . 开头，选择具有指定 class 的所有元素。
<div class="highlight">高亮文字</div>
.highlight {
background-color: yellow;
}
注意：一个元素可以有多个 class，如 class="highlight important"。
3. ID 选择器
以 # 开头，选择具有指定 id 的唯一元素。
<div id="main-content">主内容区</div>
#main-content {
font-size: 18px;
}
⚠️ 注意：id 是唯一的，不要重复使用同一个 id。
4. 通用选择器
使用 * 匹配所有元素，常用于重置默认样式。
* {
margin: 0;
padding: 0;
}
三、组合选择器
1. 群组选择器
用逗号 , 分隔多个选择器，表示“或”的关系。
h1, h2, h3 {
color: #333;
}
2. 后代选择器
空格分隔两个选择器，表示选择某元素的后代元素。
div p {
line-height: 1.5;
}
上例表示选择<div>中的所有<p>元素，不管嵌套多深。
3. 子元素选择器
使用 > 表示只选择直接子元素。
ul > li {
list-style: square;
}
与ul li不同，这个只会匹配<ul>下一级的<li>，不会匹配嵌套<ul>中的<li>。
4. 相邻兄弟选择器
使用 + 选择紧跟在某个元素之后的兄弟元素。
h2 + p {
margin-top: 0;
}
只匹配紧接在<h2>后面的第一个<p>。
5. 一般兄弟选择器
使用 ~ 选择后面所有符合条件的兄弟元素。
input:checked ~ label {
color: green;
}
四、属性选择器
可以根据元素的属性及其值进行选择。
基础语法：
-
[attr]：存在该属性； -
[attr=value]：属性等于某值； -
[attr~=value]：属性值包含一个单词； -
[attr|=value]：属性值以某值开头并后跟-； -
[attr^=value]：属性值以某值开头； -
[attr$=value]：属性值以某值结尾； -
[attr*=value]：属性值包含某字符串；
示例：
input[type="text"] {
border: 1px solid #***c;
}
a[href*="example.***"] {
color: blue;
}
img[alt~="logo"] {
border-radius: 50%;
}
五、伪类选择器
伪类用于选择元素的特定状态或位置，以冒号 : 开头。
常见伪类：
| 伪类 | 描述 |
|---|---|
| :link | 未访问链接 |
| :visited | 已访问链接 |
| :hover | 鼠标悬停时 |
| :active | 被激活时（点击） |
| :focus | 获取焦点时 |
a:hover {
text-decoration: underline;
}
input:focus {
border-color: blue;
}
结构性伪类：
| 伪类 | 描述 |
|---|---|
| :first-child | 第一个子元素 |
| :last-child | 最后一个子元素 |
| :nth-child(n) | 第 n 个子元素 |
| :only-child | 唯一子元素 |
| :empty | 没有子节点的元素 |
li:nth-child(odd) {
background-color: #f9f9f9;
}
p:empty::before {
content: "这是一个空段落";
}
UI 伪类：
| 伪类 | 描述 |
|---|---|
| :checked | 单选框/复选框被选中 |
| :enabled / :disabled | 控件是否启用 |
| :required / :optional | 是否为必填项 |
input:required {
border: 2px solid red;
}
六、伪元素选择器
伪元素用于对某些“特殊位置”添加样式，通常以双冒号 :: 开头（也可以单冒号兼容旧浏览器）。
常见伪元素：
| 伪元素 | 描述 |
|---|---|
| ::before | 在元素内容前插入内容 |
| ::after | 在元素内容后插入内容 |
| ::first-line | 元素第一行文本 |
| ::first-letter | 元素第一个字符 |
| ::selection | 用户选中的部分 |
p::first-letter {
font-size: 2em;
font-weight: bold;
}
a::after {
content: " ";
}
七、总结
| 选择器类型 | 示例 | 用途 |
|---|---|---|
| 元素选择器 | p | 所有段落 |
| 类选择器 | .btn | 所有具有 btn 类的元素 |
| ID 选择器 | #nav | 唯一的导航栏元素 |
| 属性选择器 | [type="text"] | 所有文本输入框 |
| 伪类 | :hover | 鼠标悬停效果 |
| 伪元素 | ::before | 插入装饰内容 |
| 组合选择器 | div > p | 直接子段落 |
如果你正在学习 CSS，不妨尝试自己动手写几个小例子，比如实现一个带 hover 效果的按钮、一个响应式菜单或者一个简单的卡片布局。实践是最好的老师！
