向层叠层添加样式
使用 @layer 代码块和导入的样式表，将 CSS 规则分配到指定的层叠层。
向层叠层添加样式 是 CoddyKit 上的免费 CSS Academy 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。
向层添加样式的两种方式
可以通过内联方式（在 @layer 块内）向层添加样式，也可以通过 @import（将导入的样式表分配给某个层）添加样式。
内联 @layer 块
使用层名称将规则包裹在 @layer 块中：
<button class="button">Layered button</button>添加到现有层
可以通过多个彼此独立的 @layer 块向同一层添加内容。所有声明都会合并到该层中：
<button class="button">Button</button>
<input class="input" placeholder="Input" />匿名层
不带名称的 @layer 块会创建匿名层。匿名层之后无法再添加内容，并且会固定在其出现的位置：
<p style="margin: 24px; border: 1px dashed #999;">Normal paragraph (default margin)</p>
<p class="reset" style="border: 1px dashed #999;">Reset paragraph (anonymous layer sets margin: 0)</p>使用 @layer 的 @import
将整个导入的样式表分配给一个层：
<p>This scene assigns whole imported stylesheets to layers — see the CSS panel.</p>跨文件拆分组件 CSS
在模块化项目中，每个组件文件都会向组件层添加内容：
<button class="button">Button</button>
<div class="card">Card</div>层与 PostCSS/Sass
Sass 和 PostCSS 都可以与 @layer 一起使用。可以在主入口文件中定义层，然后使用 @use 或 @import 引入向这些层添加内容的组件局部文件。
内联样式与层
内联样式（style="" 属性）不受层影响，它们始终会覆盖任何层中的样式。只有样式表规则（包括 <style> 块）可以放置在层中。
在 DevTools 中调试层
Chrome DevTools 会在“样式”面板中显示层边界。较低优先级层中被更高层覆盖的规则会显示为删除线，并标明获胜的层。
向后兼容性
不支持 @layer 的浏览器会将所有 @layer 块视为标准 CSS 块（渲染其中的全部内容）。层叠行为会有所不同，但样式不会丢失。为确保安全，请将依赖该功能的代码包裹在 @supports (@layer selector) 中。
将现有 CSS 迁移到层
迁移策略：
- 在主 CSS 文件顶部声明各个层
- 将每个现有 CSS 部分包裹在对应的层块中
- 测试并修复出现的任何优先级问题
- 随着时间推移，移除不必要的高特异性选择器
快速检查
如何将来自多个彼此独立的 @layer 块的样式添加到同一个命名层？
回顾
使用命名的 @layer name { } 块向层添加样式；这些块可以分布在不同文件中，内容最终会合并。使用 @import layer() 将导入的样式表分配给层。匿名层无法重新打开。内联样式始终会覆盖通过层声明的样式。
常见问题解答
「向层叠层添加样式」课时是免费的吗？
是的 — 「向层叠层添加样式」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。
「向层叠层添加样式」这节课中我会学到什么？
使用 @layer 代码块和导入的样式表，将 CSS 规则分配到指定的层叠层。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 CSS Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。
「向层叠层添加样式」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 CSS Academy 课中编写并运行代码吗？
能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。