0Pricing
CSS Academy · 课时

原生 CSS 嵌套

根据原生 CSS 嵌套规范，在不使用预处理器的情况下编写嵌套 CSS 规则。

原生 CSS 嵌套 是 CoddyKit 上的免费 CSS Academy 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。

什么是 CSS 嵌套？

原生 CSS 嵌套（2024 年成为基线功能，所有现代浏览器均支持）允许将 CSS 规则写在其他规则内部，其语法类似于过去只有 Sass/Less 预处理器才提供的嵌套语法。嵌套规则会自动继承父选择器的上下文。

基本嵌套语法

将子选择器写在父规则块内部。浏览器会自动组合父选择器和子选择器。&（嵌套选择器）可以显式引用父选择器，用于修饰符和伪类。

<div class="card is-active">
  <div class="title">Nested Card Title</div>
  <p>Card body text.</p>
</div>

& 嵌套选择器

& 在嵌套规则中显式表示父选择器。它可用于伪类（&:hover）、伪元素（&::before）、修饰符类（&.active）和属性选择器（&[disabled]）。如果不使用 &，嵌套规则会创建后代选择器。

伪元素嵌套

可以直接在父规则内部自然地嵌套伪元素规则：.button { &::before { content: ""; } &::after { content: ""; } }。这样可以将按钮的所有样式放在一起，避免扁平 CSS 中所需的选择器重复。

嵌套 at 规则

媒体查询和其他 at 规则可以嵌套在规则内部（Chrome 112+、Firefox 117+）：.card { padding: 1rem; @media (min-width: 768px) { padding: 2rem; } }。响应式样式会与其影响的元素放在一起，而不是集中在文件末尾单独的媒体查询块中。

选择器优先级

嵌套不会改变优先级规则——组合后的选择器与采用扁平写法时具有相同的优先级。以嵌套或扁平方式书写的 .card .title 具有相同的优先级（0,2,0）。嵌套只是语法上的便利，并不会改变优先级。

隐式后代选择器与显式 &

不带 & 的嵌套选择器会创建后代选择器：.card { .title {} } 会编译为 .card .title。使用 & 时：.card { &.active {} } 会编译为 .card.active（中间没有空格，表示修饰符类，而不是后代选择器）。

使用原生嵌套编写 BEM

原生嵌套并不适合 BEM——.block__element 和 .block--modifier 选择器是字符串，单靠 & 无法构造它们。请将嵌套用于伪类和嵌套组件结构，而不是用于 BEM 字符串拼接（后者仍需要预处理器）。

从 Sass 迁移

大多数 Sass 嵌套语法与原生 CSS 嵌套相同。例外是：Sass 允许使用 &-modifier 进行字符串拼接，而原生 CSS 不支持。迁移时，请检查 &- 或 &__ 模式，将这些特定规则展开，同时保留其他嵌套。

浏览器支持

原生 CSS 嵌套支持 Chrome 112+、Firefox 117+ 和 Safari 16.5+。如需支持较旧的浏览器，请在构建期间使用 PostCSS 和 postcss-nesting，将原生嵌套语法转换为扁平 CSS，从而现在就可以使用原生嵌套进行编写。

DevTools 与嵌套

Chrome DevTools 会在 Styles 面板中以嵌套形式显示嵌套规则。点击嵌套规则后，会跳转到 Sources 面板中正确的源代码位置。在现代 DevTools 中，调试嵌套 CSS 与调试扁平 CSS 一样清晰。

知识检查

使用或不使用 & 选择器进行嵌套时，有什么区别？

总结

原生 CSS 嵌套让普通 CSS 支持类似 Sass 的嵌套语法。& 选择器可以为伪类、伪元素和修饰符创建复合选择器。嵌套的 @media 查询可以将响应式样式与对应元素放在一起。PostCSS 可以为较旧的浏览器转换原生嵌套，从而支持逐步采用这一特性。

常见问题解答

「原生 CSS 嵌套」课时是免费的吗？

是的 — 「原生 CSS 嵌套」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。

「原生 CSS 嵌套」这节课中我会学到什么？

根据原生 CSS 嵌套规范，在不使用预处理器的情况下编写嵌套 CSS 规则。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 CSS Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 4 节。

「原生 CSS 嵌套」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 CSS Academy 课中编写并运行代码吗？

能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 原生 CSS 嵌套
  2. :has() 关系伪类
  3. 用于局部样式的 @scope
  4. 视图过渡 API
← 返回 CSS Academy