前端编程课程十三、：CSS核心基础1：CSS选择器

学习目的：精准选中HTML元素

课前热身：

直观展示 HTML 元素精准选中 的效果，我们准备了一个带动画的交互 Demo：通过点击不同按钮，精准选中页面内的元素，并给选中的元素添加高亮、缩放等动画效果，同时在控制台输出选中的元素信息。

这个 Demo 包含了 ID 选中、类名选中、属性选中、组合选择器选中 四种核心场景，代码可直接复制运行 （ 简单方式，代码存成后缀为.html的文件后，双击文件名运行 ）。

动画原理

通过 CSS 的 transition 属性设置过渡动画，让样式变化更平滑。

选中元素时添加 .active 类，触发 border-color/transform/box-shadow 等样式变化，实现高亮缩放效果。

JavaScript 负责精准选中元素，并控制类名的添加/移除，完成动画的触发和重置。

图示:CSS选择器动画展示

完整代码（HTML + CSS + JavaScript）

|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| HTML <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>元素精准选中动画演示</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: Arial, sans-serif; } .container { width: 800px; margin: 50px auto; padding: 20px; border: 1px solid #eee; border-radius: 8px; } .btn-group { margin-bottom: 30px; display: flex; gap: 10px; flex-wrap: wrap; } button { padding: 8px 16px; border: none; border-radius: 4px; background: #409eff; color: #fff; cursor: pointer; transition: all 0.3s; } button:hover { background: #66b1ff; } .box { width: 120px; height: 120px; margin: 10px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid #ccc; border-radius: 6px; font-size: 14px; transition: all 0.5s ease; /* 动画过渡 */ } /* 选中元素的高亮动画样式 */ .active { border-color: #f56c6c; background: #fef0f0; transform: scale(1.1); /* 缩放动画 */ box-shadow: 0 0 15px rgba(245, 108, 108, 0.3); } .red { background: #fde2e2; } .blue { background: #e0ecff; } </style> </head> <body> <div class="container"> <div class="btn-group"> <button onclick="selectById()">1. 按ID选中（box-2）</button> <button onclick="selectByClass()">2. 按类名选中（red + box）</button> <button onclick="selectByAttr()">3. 按属性选中（data-type="test"）</button> <button onclick="selectByCombine()">4. 组合选择器（blue且非第一个）</button> <button onclick="resetAll()">�� 重置</button> </div> <div class="box red" id="box-1">盒子1<br>red</div> <div class="box blue" id="box-2" data-type="test">盒子2<br>blue<br>data-type=test</div> <div class="box red" id="box-3">盒子3<br>red</div> <div class="box blue" id="box-4">盒子4<br>blue</div> <div class="box" id="box-5">盒子5<br>默认</div> </div> <script> // 移除所有元素的active类（重置动画） function resetAll() { const allBoxes = document.querySelectorAll('.box'); allBoxes.forEach(box => box.classList.remove('active')); console.clear(); } // 1. 按ID精准选中（唯一元素） function selectById() { resetAll(); const target = document.getElementById('box-2'); if (target) { target.classList.add('active'); console.log('✅ 按ID选中的元素：', target); } } // 2. 按类名精准选中（同时包含red和box的元素） function selectByClass() { resetAll(); const targets = document.getElementsByClassName('box red'); // HTMLCollection 转数组遍历 Array.from(targets).forEach(target => { target.classList.add('active'); }); console.log('✅ 按类名选中的元素集合：', targets); } // 3. 按属性精准选中（data-type="test"的元素） function selectByAttr() { resetAll(); const target = document.querySelector('[data-type="test"]'); if (target) { target.classList.add('active'); console.log('✅ 按属性选中的元素：', target); } } // 4. 组合选择器精准选中（.box.blue 且不是第一个子元素） function selectByCombine() { resetAll(); const targets = document.querySelectorAll('.box.blue:not(:first-of-type)'); targets.forEach(target => target.classList.add('active')); console.log('✅ 组合选择器选中的元素：', targets); } </script> </body> </html> |

演示效果说明

按 ID 选中 ：点击按钮后，只有 id="box-2" 的元素会触发缩放+高亮动画，因为 ID 是唯一的，精准定位单个元素。

按类名选中 ：会同时选中所有带 box 和 red 类的元素（盒子1、盒子3），批量触发动画。

按属性选中 ：精准匹配 data-type="test" 的元素（盒子2），适合业务中标记特定功能的元素。

组合选择器选中 ：精准选中 blue 类且不是第一个的元素（盒子4），通过 :not() 伪类缩小范围。

重置按钮：清除所有动画效果，恢复初始状态。

至此同学们可能有了直观的感受，那么请继续学习：

一、课件说明

适用人群：零基础前端学习者，已掌握CSS基础语法、3种引入方式，熟悉HTML常用标签及class/id属性
学习时长：（6-8小时，含理论学习+即时实操+综合练习）
核心目标：精通4种基础选择器、2种核心复合选择器，能根据需求精准匹配任意HTML元素，掌握选择器的适用场景和易错点，养成规范编码习惯
前置准备：VS Code（安装Open in Browser插件）、Chrome浏览器、提前创建CSS-Learn文件夹（含index.html和style.css，仅用外部样式表开发）

二、核心知识点讲解（理论+即时实操，全程手写代码）

小节 1：选择器核心认知（1小时）

1.1 什么是CSS选择器？

CSS选择器是CSS的"导航器"，核心作用是：告诉浏览器"要给哪个/哪些HTML元素设置样式"。

类比理解：HTML元素是"页面上的所有物品"（桌子、椅子、杯子），选择器就是"指向物品的手指"，只有精准指向（选中），才能给物品"上色、装饰"（设置样式）。

关键提醒：选不对元素，后续样式写得再规范，也无法生效------选择器是CSS样式生效的前提。

1.2 选择器的分类（本 课 重点）

按"常用度+难度"分为两类，优先掌握以下6种核心选择器，覆盖80%+开发场景：

基础选择器（4种）：通配符选择器、元素选择器、类选择器、ID选择器（入门必掌握）

复合选择器（2种）：后代选择器、并集选择器（解决复杂页面的精准选中问题）

小节 2：基础选择器（3小时，重点中的重点）

基础选择器是最简洁、最常用的选择器，直接匹配HTML元素的标签名、class、id或所有元素，逐个讲解+即时实操，杜绝"眼会手不会"。

2.1 通配符选择器（*）------ 选中页面所有元素

（1）理论讲解

语法：* { 样式声明; }（仅用一个星号表示）

作用：匹配页面中所有HTML元素，包括body、div、p、h1、a等所有标签，无任何遗漏。

核心适用场景：页面样式初始化------清除所有元素的默认内外边距（开发必备，几乎每个项目都要写）。

注意事项：

优先级最低：无论其他选择器如何设置，通配符选择器的样式都会被覆盖。

不滥用：不能用通配符设置复杂样式（如文字颜色、字号），会给所有元素强制加样式，导致页面混乱、影响性能。

（2）即时实操（必写，直接在style.css中编写）

需求：清除页面所有元素的默认margin（外边距）和padding（内边距），解决页面默认空白边距问题。

|--------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| css /* 通配符选择器：页面样式初始化（开发必写代码） */ * { margin: 0; /* 清除所有元素默认外边距 */ padding: 0; /* 清除所有元素默认内边距 */ box-sizing: border-box; /* 解决盒子模型宽高计算问题，后续小节详解，先复制使用 */ } |

实操验证：保存代码，右键index.html用Chrome打开，查看页面------默认的页面空白边距消失，元素紧贴页面边缘，说明代码生效。

（3）错误案例（避坑！）

|---------------------------------------------------------------------------------------|
| css /* 错误：用通配符设置文字颜色，导致所有元素（按钮、链接、标题）文字都变红 */ * { color: red; /* 不推荐！污染全局样式 */ } |

2.2 元素选择器（标签选择器）------ 选中同类标签

（1）理论讲解

语法：标签名 { 样式声明; }（直接用HTML标签名作为选择器，如p、div、h1、a）

作用：匹配页面中所有同名的HTML标签，实现"一类元素统一样式"，无需逐个设置。

核心适用场景：批量设置同类型标签的基础样式（如所有段落文字大小一致、所有链接去掉下划线）。

局限性：无法区分同名标签的不同状态------比如页面中有3个p标签，一个是"警告文本"，一个是"普通文本"，用元素选择器无法给它们设置不同颜色。

（2）即时实操

需求：给页面中所有p标签、h1标签、a标签设置基础样式，统一页面文本风格。

|------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| html  CSS选择器学习今天重点学习基础选择器，包括元素选择器、类选择器、ID选择器。元素选择器可以批量设置同类标签的样式，非常便捷。点击查看学习笔记 |

实操验证：刷新浏览器，所有h1居中变蓝、所有p标签深灰色16px、所有链接无下划线且为蓝色，实现批量样式设置。

2.3 类选择器（.类名）------ 开发最常用，跨标签复用样式

（1）理论讲解

语法：.类名 { 样式声明; }（类名前加英文半角句号）；HTML中通过class="类名"给元素绑定类。

作用：匹配页面中所有带有该class属性的元素，可跨标签复用（核心优势）------比如div和p标签，只要绑定同一个类，就能拥有同一样式。

核心特点（必记！）：

一个元素可以绑定多个类名，类名之间用空格分隔（如<div class="box red">），实现样式拆分复用。

一个类名可以绑定多个元素，无论元素标签是否相同，都能生效。

类名命名规则（避坑关键）：

只能包含：字母、数字、下划线（_）、中划线（-），不能包含中文、特殊符号。

不能以数字开头（如.123box是错误的）。

建议命名：小写字母+中划线（如.warning-text、.news-card），见名知意，便于后期维护。

适用场景：给不同标签设置相同样式、给同类标签设置不同样式（解决元素选择器的局限性），是开发中最常用的选择器。

（2）即时实操1：基础使用（不同标签复用样式）

|-------------------------------------------------------------------------------------------|
| html  CSS选择器学习这是警告提示文本（p标签）这是警告提示框（div标签）这是普通文本（无类名） |

实操验证：刷新浏览器，p标签和div标签（带warning类）都变成"红色加粗+红色边框"，普通p标签不受影响，实现跨标签样式复用。

（3）即时实操2：多类名绑定（高级用法，开发常用）

需求：一个元素需要同时拥有"警告样式"和"大号文字样式"，拆分类名，实现样式复用。

|--------------------------------------------------------------------------------|
| html  这是大号警告文本（绑定2个类名） |

实操验证：该p标签同时拥有"红色加粗+红色边框"（warning类）和"20px大号文字"（big-text类），实现样式拆分------后续其他元素需要"大号文字"，直接绑定big-text类即可，无需重复写代码。

2.4 ID选择器（#ID名）------ 选中页面唯一元素

（1）理论讲解

语法：#ID名 { 样式声明; }（ID名前加英文半角井号）；HTML中通过id="ID名"给元素绑定ID。

作用：匹配页面中唯一的、带有该ID的元素------一个页面中，同一个ID名只能出现一次，不能重复绑定给多个元素。

命名规则：和类选择器一致（字母、数字、下划线、中划线，不数字开头），但必须保证"页面唯一"。

适用场景：给页面中独一无二的元素设置样式（如网站头部、底部、登录框、顶部导航栏）------这类元素全页面只有一个。

注意事项（必记！）：

一个元素只能绑定一个ID名，但可以同时绑定ID和类（如<header id="page-header" class="container">），类样式可覆盖ID样式（后续优先级讲解）。

不滥用ID选择器：ID选择器优先级远高于类选择器和元素选择器，滥用会导致后续修改样式困难（需要用更高优先级覆盖）。

（2）即时实操

需求：给页面唯一的头部（header）设置样式，全页面只有一个头部，用ID选择器。

|------------------------------------------------------------------------|
| html  CSS选择器学习 |

实操验证：刷新浏览器，页面顶部出现黑色头部，文字垂直+水平居中，全页面只有这一个头部，ID选择器精准生效。

2.5 基础选择器对比表（必背！）

|--------|---------------------|---------------|-----|------------------|
| 选择器类型 | 语法 | 匹配范围 | 优先级 | 核心适用场景 |
| 通配符选择器 | * | 所有元素 | 最低 | 页面样式初始化（清除默认边距） |
| 元素选择器 | 标签名（p、div等） | 所有同名标签 | 低 | 批量设置同类标签基础样式 |
| 类选择器 | .类名（.warning等） | 所有带该类的元素（跨标签） | 中 | 样式复用、个性化样式（开发首选） |
| ID选择器 | #ID名（#page-header等） | 页面中唯一的元素 | 高 | 页面唯一元素（头部、底部等） |

小节 3：复合选择器（2小时，解决复杂结构选中问题）

当页面结构复杂（如div嵌套p、ul嵌套li），基础选择器无法精准选中"某个父元素内的子元素"，此时需要用复合选择器------组合多个基础选择器，实现精准定位，不污染全局样式。

3.1 后代选择器（空格分隔）------ 选中父元素内的所有后代元素

（1）理论讲解

语法：选择器1 选择器2 { 样式声明; }（两个选择器之间用空格分隔）。

核心逻辑：选择"选择器1所匹配的元素"内部的"所有选择器2所匹配的元素"------包括直接子元素和嵌套的子元素（即"后代"，无论嵌套多少层）。

核心优势：不污染全局样式------只给指定父元素内的子元素设置样式，其他地方的同名元素不受影响。

适用场景：嵌套结构的元素样式（如导航栏中的li标签、文章容器内的p标签、列表内的链接）。

（2）即时实操（开发常用场景：导航栏列表样式）

需求：页面中有导航栏和全局列表，只给导航栏内的li标签设置"横向排列、去掉默认圆点"，全局列表不受影响。

实操验证：刷新浏览器，导航栏内的li横向排列、去掉圆点，链接悬浮变蓝；全局列表的li依然是默认纵向排列、带圆点，实现"精准选中，不污染全局"。

3.2 并集选择器（逗号分隔）------ 多个选择器共享同一样式

（1）理论讲解

语法：选择器1, 选择器2, 选择器3 { 样式声明; }（多个选择器之间用英文半角逗号分隔）。

核心逻辑：匹配"选择器1、选择器2、选择器3"所匹配的所有元素，给它们设置同一样式------相当于"一次给多个元素/选择器批量设置样式"，避免重复写代码。

注意事项：

逗号前后的选择器是独立的，可以是任意类型的选择器（基础选择器、复合选择器都可）。

逗号不能省略------省略逗号会变成后代选择器，效果完全不同（如h1 h2是后代选择器，h1,h2是并集选择器）。

适用场景：多个不同类型的元素/选择器，需要设置相同样式（如所有标题居中、所有按钮统一样式）。

（2）即时实操

需求：页面中所有h1、h2标签，以及带.subtitle类的元素，统一设置"水平居中、去掉默认加粗"，避免重复写代码。

|---------------------------------------------------------------------------------------------------|
| html  CSS选择器学习基础选择器详解类选择器是开发中最常用的选择器，需重点掌握。 |

|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| css /* 并集选择器：h1、h2、.subtitle 共享同一样式 */ h1, h2, .subtitle { text-align: center; /* 水平居中 */ font-weight: normal; /* 去掉默认加粗 */ color: #333; /* 文字深灰色 */ margin: 15px 0; /* 上下外边距15px */ } |

实操验证：刷新浏览器，h1、h2标签和带.subtitle类的p标签，全部水平居中、去掉加粗，实现"一次编写，多元素复用"。

3.3 复合选择器拓展（可选，进阶了解）

本天重点掌握上述2种复合选择器，以下2种作为拓展，后续用到再深入学习：

|---------|--------------|--------------------------|-----------------------|
| 复合选择器类型 | 语法 | 匹配范围 | 适用场景 |
| 子选择器 | 选择器1 > 选择器2 | 选择器1的直接子元素（不包含嵌套子元素） | 精准匹配直接子元素，避免嵌套子元素受影响 |
| 相邻兄弟选择器 | 选择器1 + 选择器2 | 选择器1后面紧邻的一个选择器2元素 | 给相邻元素设置样式（如标题后的第一个段落） |

小节 4：当天综合练习（1小时，巩固所有知识点）

需求：结合当天所学的4种基础选择器、2种复合选择器，制作一个简单的页面，要求如下（独立完成，不参考课件代码）：

页面结构：头部（唯一，用ID选择器）、标题（h1）、2个不同样式的段落（用类选择器）、导航栏（嵌套ul>li>a，用后代选择器）、全局列表（ul>li）。

样式要求：

用通配符选择器初始化页面（清除默认边距）。

头部：黑色背景、白色文字、高度60px、文字垂直+水平居中。

h1和导航栏标题（h2）：用并集选择器设置居中、深灰色、去掉加粗。

段落：一个普通段落（元素选择器）、一个警告段落（类选择器，红色加粗+红色边框）。

导航栏：用后代选择器设置li横向排列、去掉圆点，a标签无下划线，悬浮变蓝。

全局列表：保持默认样式（不被导航栏样式影响）。

编码规范：所有样式写在style.css（外部样式表），类名、ID名见名知意，添加简单注释。

练习验证标准：所有选择器精准生效，样式不污染全局，代码无语法错误，页面排版整洁。

小节 5：当天知识点总结+易错点梳理

5.1 核心知识点总结（必记）

选择器的核心作用：精准选中HTML元素，是CSS样式生效的前提。
4种基础选择器：类选择器是开发首选，通配符仅用于初始化，ID选择器仅用于唯一元素。
2种复合选择器：后代选择器（精准定位嵌套元素）、并集选择器（批量复用样式）。
核心原则：不滥用ID选择器、不滥用通配符，类选择器优先，样式复用优先，不污染全局样式。

5.2 常见易错点（避坑）

类选择器漏写"."、ID选择器漏写"#"，导致选择器失效（如warning写成.warning，page-header写成#page-header）。

类名、ID名以数字开头，或包含中文、特殊符号，导致选择器无效。

后代选择器和并集选择器混淆：空格是后代，逗号是并集（如.site-nav li是后代，.site-nav, li是并集）。

多个类名绑定的时，类名之间用逗号分隔（错误），正确是用空格分隔。

用通配符设置复杂样式（如文字颜色），导致页面样式混乱。

前端编程 课程十三、：CSS核心基础1：CSS选择器

学习目的： 精准选中HTML元素

前端编程课程十三、：CSS核心基础1：CSS选择器

学习目的：精准选中HTML元素