CSS 基础选择器

Web 课堂笔记：CSS 基础选择器
一、本节课核心：CSS 基础选择器

1. 标签指定选择器（交集选择器）
   语法：标签名.class名 / 标签名#id名，中间不能有空格，比如h3.special、p#one。
   作用：只给「指定标签 + 指定类 / ID」的元素设置样式，实现更精准的选择。
2. 后代选择器
   语法：外层选择器 内层选择器，中间用空格分隔，比如div p。
   作用：选择某个元素内部的所有后代元素，给嵌套的内层标签设置样式。
3. 并集选择器
   语法：多个选择器用逗号连接，比如h1, p, .red。
   作用：给多个不同的选择器设置相同的样式，减少重复代码。
   二、课堂代码实操
4. 类选择器基础用法
   语法：.类名 { 样式属性: 值; }，比如.red { color: red; }。
   作用：给所有带有对应 class 属性的元素设置样式，示例中定义了.red类，实现文字变红 + 字体加粗效果。
5. 表格隔行变色案例
   定义了.odd（奇数行）和.even（偶数行）两个类，分别设置背景色。
   核心逻辑：给表格的不同行添加不同的 class，实现隔行变色，让表格数据更易读。
   三、易错点 & 关键提示
   交集选择器中间不能有空格，否则会被浏览器识别为后代选择器。
   后代选择器的空格是关键，外层和内层标签之间的空格不能省略。
   并集选择器的逗号分隔可以批量设置样式，是优化重复代码的常用技巧。
   类选择器可以复用，一个类可以给多个元素使用，是开发中最常用的选择器之一。
   四、知识小结
   类选择器：.类名，通用、可复用，适合批量设置样式。
   交集选择器：标签.类名，精准定位，只给特定标签的特定类生效。
   后代选择器：父 子，给嵌套结构里的子元素设置样式。
   并集选择器：选择器1, 选择器2，给多个选择器统一设置样式。