freeCodeCamp 课程源码解读：CSS 样式冲突时如何优先生效——Basic CSS 课程 "Prioritize One Style Over Another" 实战

本文以 freeCodeCamp 开源仓库中 Basic CSS 模块的一门实操课程 Prioritize One Style Over Another（课程文件 curriculum/challenges/english/blocks/basic-css/bad87fee1348bd9aedf08756.md）为主体，完整还原其题目场景、操作步骤、种子代码与官方答案代码，并结合课程中内置的断言验证逻辑，深入讲解"当一个元素同时命中多条相互冲突的 CSS 规则时，浏览器如何判定最终生效样式"这一 CSS 级联（Cascade）核心概念。读完你可以掌握：类选择器为何能覆盖元素选择器、声明顺序的作用，以及后续课程沿此脉络展开的完整 CSS 优先级链条（ID 选择器、内联样式、!important）。

课程定位：Basic CSS 模块中级联知识链的一环

freeCodeCamp 的课程体系按 "block"（模块）组织。Basic CSS 模块的任务清单定义在 curriculum/structure/blocks/basic-css.json，其中每门课由 id 与 title 标识，按 challengeOrder 数组顺序排布，模块元信息还带有 "helpCategory": "HTML-CSS" 与 "blockLayout": "legacy-challenge-list" 字段。

本课程的 id 为 bad87fee1348bd9aedf08756，标题 Prioritize One Style Over Another。从该 JSON 的课程排序看，它处于一条精心设计的"级联与优先级"知识链的中段，前后课程的依赖关系非常清晰：

课程顺序	课程 ID	标题	在知识链中的角色
第 27 课	bad87fee1348bd9aedf08736	Style the HTML Body Element	学会给 body 写全局样式
第 28 课	bad87fee1348bd9aedf08746	Inherit Styles from the Body Element	理解子元素如何继承 body 的 color 等属性
第 29 课	bad87fee1348bd9aedf08756	Prioritize One Style Over Another（本文主体）	类选择器覆盖元素选择器
第 30 课	bad87fee1348bd9aedf04756	Override Styles in Subsequent CSS	声明顺序：后声明者胜出
第 31 课	bad87fee1348bd8aedf06756	Override Class Declarations by Styling ID Attributes	ID 选择器覆盖类选择器
第 32 课	bad87fee1348bd9aedf06756	Override Class Declarations with Inline Styles	内联样式覆盖 ID 声明
第 33 课	bad87fee1348bd9aedf07756	Override All Other Styles by using Important	!important 凌驾一切（含内联样式）

也就是说，本课程解决"类样式 vs 元素样式"这一级，后续的兄弟课程会逐级加码。本文聚焦第 29 课本身，并在最后结合仓库中的兄弟课程文件（位于同一目录 curriculum/challenges/english/blocks/basic-css/）完整呈现这条优先级链。

课程文件的结构与 Frontmatter

与 freeCodeCamp 课程仓库的其他挑战文件一致，该 Markdown 文件由 YAML frontmatter 与若干以 # --xxx-- 标记分隔的内容块组成：

---
id: bad87fee1348bd9aedf08756
title: Prioritize One Style Over Another
challengeType: 0
videoUrl: 'https://scrimba.com/c/cZ8wnHv'
forumTopicId: 18258
dashedName: prioritize-one-style-over-another
---

• id：课程在数据库中的唯一标识，与 curriculum/structure/blocks/basic-css.json 中 challengeOrder 数组的条目一一对应；
• challengeType: 0：从源码结构看，challengeType 是课程 schema（curriculum/schema/challenge-schema.js）中的必填数字字段，其取值由 @freecodecamp/shared 包导出的 challengeTypes 常量枚举约束（取值范围 0–33），0 即标准代码编写型挑战；
• dashedName：课程在论坛与 URL 中使用的连字符名称；
• videoUrl / forumTopicId：分别指向配套的 Scrimba 视频与官方论坛讨论帖。

frontmatter 之后是五类内容块：# --description--（题目描述）、# --instructions--（操作步骤）、# --hints--（提交后给出的失败提示，内嵌可执行的断言代码）、# --seed-- / ## --seed-contents--（编辑器初始代码）、# --solutions--（官方参考解答）。课程文件解析与入库逻辑可参考 curriculum/src/file-handler.ts 与 curriculum/src/get-challenges.ts。

冲突场景：题目描述（--description--）

题目原文描述了一个典型冲突：

HTML 元素有时会受到多条相互冲突的样式。比如你的 h1 元素不可能既是绿色又是粉色。

让我们创建一个让文字变粉的类，再把它应用到元素上，看看这个类能否 override（覆盖）body 元素上的 color: green; 属性？

这正是 CSS 级联要回答的问题：body { color: green; } 声明的颜色会沿 DOM 树继承给 h1（这是前一课 Inherit Styles from the Body Element 建立的认知）；但如果同时存在一条直接命中 h1 的 .pink-text 规则，二者冲突时谁生效？课程用实验的方式给出答案，而不是直接背诵规则。

操作步骤与完整代码（--instructions-- / --seed-- / --solutions--）

题目给出的操作要求只有两条：

1. 创建一个名为 pink-text 的 CSS 类，使元素文字颜色变为粉色；
2. 给 h1 元素添加 pink-text 这个类。

种子代码（编辑器初始状态）

课程 --seed-contents-- 块提供的初始代码如下——body 已声明黑色背景、等宽字体和绿色文字，h1 尚未加类：

<style>
  body {
    background-color: black;
    font-family: monospace;
    color: green;
  }
</style>
<h1>Hello World!</h1>

此时 h1 没有自身颜色声明，其绿色完全来自对 body 颜色的继承。

官方答案代码（--solutions--）

官方解答只做了两处最小改动：在 <style> 中新增 .pink-text 规则，并给 h1 加上 class="pink-text"：

<style>
  body {
    background-color: black;
    font-family: monospace;
    color: green;
  }
  .pink-text {
    color: pink;
  }
</style>
<h1 class="pink-text">Hello World!</h1>

运行结果：h1 文字由绿变粉。这说明类选择器的直接声明覆盖了来自 body 的继承值——在 CSS 中，"直接命中"的声明天然优先于"继承得来"的值，这是级联规则中非常基础但极易被初学者忽视的一条。

验证逻辑（--hints-- 块中的断言）

课程的 --hints-- 块同时是这套练习的"可执行规格说明"，三条断言分别校验：

// 1. h1 必须携带 pink-text 类
assert.isTrue(document.querySelector('h1').classList.contains('pink-text'));

// 2. <style> 中必须存在形如 .pink-text { color: ... } 的 CSS 规则
assert.match(__helpers.removeCssComments(code), /\.pink-text\s*\{\s*color\s*:\s*.+\s*;?\s*\}/g);

// 3. h1 的计算样式颜色必须精确等于粉色
const h1Element = document.querySelector('h1');
const color = window.getComputedStyle(h1Element)['color'];
assert.strictEqual(color, 'rgb(255, 192, 203)');

两个值得注意的工程细节：

• 为什么期望值是 rgb(255, 192, 203) 而不是 pink：window.getComputedStyle 返回的是浏览器解析后的计算值，CSS 颜色关键字 pink 会被归一化为 rgb() 表示，pink 的标准色值正是 rgb(255, 192, 203)。用计算样式断言而不是匹配源码字符串，能真正验证"页面渲染结果"，而非仅仅验证"写了某段文本"。
• __helpers.removeCssComments(code)：断言在执行前会先剥掉代码中的 CSS 注释，学员写注释不会干扰正则匹配。__helpers 是课程测试运行时注入的辅助对象，同类用法（removeCssComments / removeHtmlComments）贯穿 Basic CSS 模块各课的提示断言。

原理纵深：浏览器如何判定"哪条样式优先"

课程用粉色实验验证的其实是 CSS 级联机制的第一层。当多条规则都试图设置同一元素（或可继承到同一元素）的同一属性时，浏览器按以下维度裁决：

1. 来源与类型：作者样式、用户样式、浏览器默认样式，以及普通声明与 !important 声明分属不同层；
2. 继承 vs 直接声明：直接命中元素的声明优先于从祖先继承来的值。本课程的绿色被粉色击败，正是因为 color: green 对 h1 而言只是继承值，而 .pink-text 是直接声明；
3. 选择器优先级（Specificity）：内联样式 > #id > .class/属性/伪类 > 元素选择器。.pink-text（0,1,0）天然高于 body（0,0,1）；
4. 来源顺序：优先级相同的声明中，后出现者胜出——这正是下一课 Override Styles in Subsequent CSS 要验证的内容。

从课程仓库的后续挑战文件看，这条优先级链被逐环实验验证，每一环都有独立的 getComputedStyle 颜色断言锁定"赢家"：

• Override Styles in Subsequent CSS（bad87fee1348bd9aedf04756.md）：在 h1 上同时挂 class="pink-text blue-text"，断言颜色为 rgb(0, 0, 255)。课程原文强调：类写在元素属性里的先后顺序无关紧要，起决定作用的是 <style> 中类声明的先后——.blue-text 声明在后，故胜出；
• Override Class Declarations by Styling ID Attributes（bad87fee1348bd8aedf06756.md）：给 h1 加 id="orange-text" 并写 #orange-text { color: orange; }，断言颜色为 rgb(255, 165, 0)。原文注明：无论该 ID 声明写在 pink-text 之前还是之后，ID 选择器总是优先于类选择器；
• Override Class Declarations with Inline Styles（bad87fee1348bd9aedf06756.md）：追加 style="color: white"，断言颜色为 rgb(255, 255, 255)——内联样式胜过 <style> 中的所有声明，包括 ID 选择器；
• Override All Other Styles by using Important（bad87fee1348bd9aedf07756.md）：把 .pink-text 的声明改为 color: pink !important;，颜色回到 rgb(255, 192, 203)。该课还给出了使用 !important 的现实动机：引入第三方 CSS 库时，库样式可能意外覆盖你的样式，!important 是确保某条声明必胜的最后手段（其断言用正则强制要求 color:.*pink.*!important 出现在 .pink-text 规则体内）。

至此，课程的实验链恰好复现了标准级联中作者样式一侧的完整优先级阶梯：

!important 声明  >  内联样式  >  #id 选择器  >  .class 选择器  >  元素选择器  >  继承值
（同级声明之间再按 CSS 来源顺序，后声明者胜出）

小结

这门课程的体量虽小——只改两行代码（加一条类规则、加一个 class 属性），但它建立了理解 CSS 冲突裁决的第一块基石：直接声明胜过继承值。仓库中该课程的完整材料（题目、提示断言、种子代码、官方解答）都集中在 curriculum/challenges/english/blocks/basic-css/bad87fee1348bd9aedf08756.md 一个文件内，配合 curriculum/structure/blocks/basic-css.json 中的课程排序，可以沿着 bad87fee1348bd9aedf04756 → bad87fee1348bd8aedf06756 → bad87fee1348bd9aedf06756 → bad87fee1348bd9aedf07756 的顺序继续阅读，观察 freeCodeCamp 如何用同一套"绿色/粉色/蓝色/橙色/白色"实验把 CSS 优先级机制从元素、类、ID、内联一路推到 !important。这套"每课一个最小可运行实验 + 计算样式断言锁定结果"的课程设计，本身也是研究该仓库课程体系时的一个值得借鉴的模式。