Next.js · CSS Cascade Field Lab

导航历史会变,样式所有权不能漂

切换路径与方案,追踪当前文档里的 stylesheet、资源发现时机和 .panel 的最终胜者。预取能提前发现资源,却不会替 cascade 发明新的优先级。

预取暴露问题 不定义优先级

实验控制台

① 选择样式策略

② 选择访问路径

③ 改变发现时机

快捷键:Alt+14 切四条路径,Alt+P 切预取,Alt+R 重置;分段控件支持方向键。

Current route B · 项目页
Matching rules 1 条匹配
Cascade winner projects.css
Diagnosis 当前正确,但依赖历史
Rendered result

当前页面外观

ROUTE B
PROJECTS · B

最终计算样式

项目协作面板

这块区域属于 B 页面,应该使用项目页的湖蓝语义。

胜者:projects.css
Document head

当前 stylesheet 集合

离开路由不等于移除

    顺序数字表示这个教学模型中的 cascade 注册顺序;“已发现/已缓存”不等于“拥有更高 CSS 优先级”。

    Resource discovery

    资源发现时间线

    时机 ≠ 优先级

      时间线只解释“何时发现资源”。实际 Next.js 产物仍由模块导入图、构建拆分与 React stylesheet 协调;不要把本模拟当作内部网络协议。

      Cascade inspector

      .panel 胜者是怎样算出来的

      匹配 → layer → specificity → source order

      直接进入 B 时没有 reports.css 参与竞争,所以“看起来正确”不能证明全局类名安全。

      10 quick checks

      把偶然现象还原成可解释规则

      每题选择后立即反馈。题目覆盖全局留存、预取、Module、layer、specificity、语义变体与生产复现。

      已答 0 / 10 · 正确 0