02引入与基础选择器

学 CSS 要先解决两件事：样式「写在哪儿」（三种引入方式），以及「写给谁」（基础选择器）。选对了选择器，样式才不会跑偏。

约 20 分钟 8 个动手实验选择器入门课

一、行内样式：写在标签上的 style

行内样式把 CSS 直接写进 HTML 标签的 style 属性里，只作用于这一个元素。因为已经「点名」了元素，所以不需要选择器，引号里直接写声明：

行内样式：style 写在标签上。改第一个 p 的颜色，只有它会变

它的优先级是三种引入方式里最高的（后面的优先级专题会量化），但这也是它最大的问题：

样式和结构搅在一起，违背「结构与样式分离」的初心
无法复用：十个按钮要加粗，就得写十遍
难维护：想统一改个颜色，得满页面找 style

结论：日常开发几乎不用行内样式。看到它出现，多半是邮件模板、某些组件库的内部实现，或临时救急的覆盖。

二、内部样式表与外部样式表：推荐的两种写法

内部样式表：把 CSS 写进 <head> 里的 <style> 标签，整个页面共用一套规则——本站课程里的演示用的都是它。完整的页面结构长这样：

把 <style> 块放进实验台，亲手感受「定义一次，处处可用」：

内部样式表：改 .note 的背景色，两个提示条同时变化——这就是复用

外部样式表：CSS 单独存成 .css 文件，页面用 <link> 引入。这是正式项目的标配：结构与样式彻底分离、多页面共享一份样式、浏览器还能缓存它加快二次访问。

三种引入方式对比：行内救急、内部练习、外部标配
引入方式	写在哪	优先级	优点	缺点	使用建议
行内样式	标签 `style` 属性	最高	精准、临时	不能复用、难维护	基本不用
内部样式表	`<style>` 标签	中	单页方便、零额外文件	跨页面无法复用	练习、单页、演示
外部样式表	独立 `.css` + `<link>`	中	分离、复用、可缓存	多一次文件请求	项目标配

记忆点：link 放 head 里、rel="stylesheet"、href 指向 css 文件，三样齐了样式才能挂上。忘写 rel 是新手常踩的坑。

三、元素选择器：按标签名一网打尽

写标签名就是元素选择器：p {} 选中页面上所有 <p>， h2 {} 选中所有二级标题。它是最「一刀切」的选择器——优点是批量统一，缺点是难以个性化。

元素选择器：改 h2 的颜色试试，标题和段落各听各的规则

实战用法：元素选择器适合打「底妆」——比如全站段落统一行高、全站链接去掉下划线；个性化装饰交给下一节的 class。

四、class 选择器：样式复用的主力军

class（类）选择器用点号 . 开头，匹配挂着对应类名的元素。它是 CSS 里最常用的选择器：一个类写一次，想给多少元素用就给多少元素用。

class 复用 + 多 class 叠加：改 .tag-hot 的颜色，两颗「热门」标签同时变

HTML 写法：class="tag tag-hot"——多个类名用空格分隔，顺序无所谓
两个类的规则同时生效，冲突的属性按「后面的规则 / 更高优先级」决出（优先级专题细讲）
命名建议：见名知义（.tag 而不是 .red），英文小写 + 连字符（kebab-case）

类名不要以数字开头（.2col 非法），不要用中文和特殊符号；大小写敏感：.Tag 和 .tag 是两个不同的类。

五、id 选择器：独一无二的身份牌

id 选择器用井号 # 开头，匹配 id 属性对应的元素。 id 是身份证：整页只能出现一次；class 是校服：谁都能穿。

id 选择器样式化的横幅：把渐变角度 135deg 改成 45deg 试试

class 与 id 的取舍：样式交给 class，id 留给身份标识
对比项	class（类）	id（身份）
CSS 写法	`.box`（点号）	`#header`（井号）
HTML 写法	`class="box"`	`id="header"`
页面允许数量	无限个元素共用	只能出现一次
一个元素能挂几个	多个（空格分隔）	仅一个
优先级权重	10 分	100 分（高出十倍）
典型用途	样式复用、组件	JS 定位、页内锚点

工程习惯：写样式尽量用 class，id 留给 JS（getElementById）和锚点跳转。 id 的 100 分优先级太高，样式一旦用 id 写，后面想覆盖就得跟着堆砝码。

六、通配符 * 与分组选择器

通配符 * 匹配所有元素，最经典的用法是项目开头的「全局重置」：

下面这个演示把通配符的作用范围限定在一个容器里（写成 .wild *），让每个被选中的元素都「现形」——你会看到标题、段落、div、span 一个都没跑掉：

通配符选中范围内的所有元素：把 * 改成 p，选中面立刻收窄

分组选择器用逗号把多个选择器捆在一起，一套样式群发：

分组选择器：公共样式群发 + 各自小灶。把逗号分组里的 letter-spacing 改大，两行一起变

口诀：星号管全部，逗号管群发。分组是「抽取公共样式」的手段，能有效减少重复代码。

七、后代选择器：只在指定范围内动手

选择器之间用空格连接就是后代选择器： .menu a 读作「menu 里面的 a」，隔多少层都算，但范围外的元素一概不理。它让样式有了「作用域」。

菜单里的链接被改样式，菜单外的原封不动。鼠标悬停菜单链接试试 :hover

「.菜单 a」的写法是组件化样式的雏形：先圈住一块区域，再对区域内的小元素动手。后面的选择器进阶课会解锁 >、+、~ 三种更精确的组合方式。

八、本章小结

基础选择器速查：语法、含义与常用度
选择器	语法	含义	常用度
元素选择器	`p { }`	所有该标签的元素	⭐⭐⭐⭐
class 选择器	`.box { }`	挂着该类名的元素，可复用、可叠加	⭐⭐⭐⭐⭐
id 选择器	`#header { }`	唯一元素，优先级高，样式少用	⭐⭐
通配符	`* { }`	所有元素，常用于全局重置	⭐⭐⭐
分组选择器	`h1, h2, p { }`	多个选择器共享一套样式	⭐⭐⭐⭐
后代选择器	`.menu a { }`	某范围内所有后代元素	⭐⭐⭐⭐⭐

三种引入方式：行内（基本不用）、内部（练习）、外部（项目标配）
class 是校服（人人可穿、可多穿），id 是身份证（一页一张）——样式交给 class
多个类名空格分隔，规则同时生效
通配符做全局重置，逗号做样式群发，空格做范围圈定

动手练习：写一个含有导航（3 个链接）、一段正文、一张卡片的页面，外部建一个 style.css 用 <link> 引入。要求：用元素选择器统一正文行高，用class做卡片样式，用后代选择器只给导航里的链接去下划线，id 留给横幅。