CSS 选择器 (1)：核心语法规则 + 常见选择器分类全面详解
（2026 最新实用版 · 从零基础到熟练掌握）
CSS 选择器是 CSS 的核心灵魂，它告诉浏览器“把哪些元素选中，然后应用后面的样式”。掌握选择器，你就能精准、高效地控制页面任意元素。
1. CSS 选择器基本语法规则
选择器 {
属性: 值;
属性: 值;
}
核心组成：
- 选择器：告诉浏览器要选中哪些元素（可以是一个，也可以是多个）
- 声明块：用
{}包裹，里面是一条条 “属性: 值;” 的声明
书写规范（强烈建议遵守）：
- 选择器与
{之间加一个空格 - 每条声明独占一行
- 属性名后紧跟
:，值后紧跟; - 最后一条声明可以不加
;（但推荐统一加上）
示例：
/* 正确写法 */
h1 {
color: #2c3e50;
font-size: 32px;
text-align: center;
}
/* 错误示范：缺少空格、声明没分号 */
h1{color:red;font-size:32px}
2. CSS 选择器分类总览（2026 主流分类）
CSS 选择器主要分为以下 6 大类：
| 分类 | 优先级权重 | 代表选择器 | 说明 |
|---|---|---|---|
| 通用选择器 | 0 | * | 选中所有元素（慎用） |
| 元素（类型）选择器 | 1 | div、p、h1、a | 按 HTML 标签名选择 |
| 类选择器 | 10 | .box、.header | 最常用，配合 class 属性 |
| ID 选择器 | 100 | #main、#header | 唯一性强，一个页面一个 ID |
| 属性选择器 | 10 | [type="text"]、[href^="https"] | 根据属性和属性值选择 |
| 伪类选择器 | 10 | :hover、:nth-child(2)、:is() | 根据状态、位置、结构选择 |
| 伪元素选择器 | 1 | ::before、::after、::first-line | 创建虚拟元素，常用于装饰 |
注意：优先级权重用于层叠冲突时决定谁生效（后面课程会详细讲）。
3. 基础选择器详解（必须熟练掌握）
1. 元素（类型）选择器
p { color: #333; } /* 所有段落 */
h1, h2, h3 { font-weight: bold; } /* 多个标签用逗号分隔 */
2. 类选择器（Class Selector）—— 日常使用频率最高
.red { color: red; }
.box { padding: 20px; border: 1px solid #ccc; }
/* 一个元素可以有多个类 */
<div class="box red important"></div>
3. ID 选择器（唯一性最强）
#header { background: #2c3e50; color: white; }
#main-content { max-width: 1200px; margin: 0 auto; }
4. 通用选择器（*）
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
注意：性能较差，生产环境慎用，通常只在重置样式时使用。
4. 组合选择器（进阶，必学！）
这些是真正提升你 CSS 水平的关键：
1. 后代选择器（空格）
/* 选中 .content 里面的所有 p 元素（无论嵌套多深） */
.content p { color: #666; }
2. 子选择器（>）
/* 只选中 .menu 直接子元素 li（不包括孙子） */
.menu > li { display: inline-block; }
3. 相邻兄弟选择器（+）
/* 选中 h2 后面紧挨着的第一个 p */
h2 + p { margin-top: 10px; font-size: 18px; }
4. 通用兄弟选择器（~）
/* 选中 h2 后面所有兄弟 p 元素 */
h2 ~ p { color: #888; }
5. 属性选择器（非常实用）
/* 基础 */
input[type="text"] { width: 300px; }
/* 常用匹配符 */
a[href^="https"] { color: green; } /* 以 https 开头 */
a[href$=".pdf"] { color: red; } /* 以 .pdf 结尾 */
a[href*="baidu"] { color: blue; } /* 包含 baidu */
img[alt] { border: 2px solid gold; } /* 只要有 alt 属性 */
6. 伪类与伪元素（现代 CSS 重头戏）
伪类（:）
a:hover { color: red; }
li:nth-child(odd) { background: #f8f8f8; }
input:focus { outline: 2px solid blue; }
button:disabled { opacity: 0.5; cursor: not-allowed; }
/* 结构伪类（非常常用） */
:first-child, :last-child, :nth-child(n), :nth-of-type()
伪元素（::）—— 注意是两个冒号
p::first-line { font-size: 1.2em; }
p::first-letter { font-size: 3em; float: left; }
.box::before {
content: "★";
color: gold;
margin-right: 8px;
}
.box::after {
content: "";
display: block;
clear: both;
}
7. 选择器优先级记忆口诀（重要！）
ID > 类/属性/伪类 > 元素/伪元素
具体权重计算规则（后面第 2 课会详细拆解）：
- ID 选择器：100
- 类、属性、伪类：10
- 元素、伪元素：1
- 通用选择器：0
!important：直接最高（慎用）
总结：本节核心知识点
- CSS 选择器 = 选中元素 + 应用样式
- 最常用：元素、类、ID、后代、子选择器
- 进阶必会：属性选择器、伪类、伪元素、组合选择器
- 书写时注意空格、逗号、冒号、分号规范
- 优先使用 类选择器，少用 ID 和
*
课后练习（建议立即动手）：
- 用类选择器给所有按钮加上统一的圆角和阴影
- 用后代 + 子选择器实现导航栏（ul > li > a）
- 用属性选择器选中所有外部链接并加上图标
- 用
:nth-child实现表格隔行变色 - 用
::before和::after给标题加上装饰线
下一课预告：《CSS 选择器 (2)：优先级详解 + 层叠规则 + 现代选择器（:is、:where、:has）》
需要我立即补充：
- 本节所有选择器的完整实战代码示例（可直接复制运行的 HTML+CSS）
- 选择器优先级计算练习题（带答案）
- 2026 年新增/推荐的现代选择器提前预览
- 选择器性能优化建议
随时告诉我，我立刻继续输出！
继续加油，学完选择器系列后，你的 CSS 水平会直接上一个台阶！✨
