内联关键CSS后样式错乱怎么办？

开发者兴娜提问于 2026-03-05 13:00:19 阅读 12

优化

我在做首屏优化时把关键CSS内联到HTML里了，但页面样式完全乱了，是不是提取的关键CSS不完整？

我用的是 Critical 工具自动提取的，生成的内联样式大概长这样：

.header {
  position: fixed;
  top: 0;
  width: 100%;
}
.hero {
  padding-top: 80px;
  background: #f5f5f5;
}

但实际页面中有些元素没样式，比如 .nav-item:hover 的效果没了，是不是媒体查询或者伪类没被正确提取？

我来解答赞 3 收藏

反馈

1 条解答

Top丶怡涵 Lv1

Critical工具确实经常漏掉伪类和媒体查询样式，这老问题了。手动检查下提取结果，确认是不是少了这些部分。

给你个保险的解决方案，把关键CSS分成两部分处理：

1. 基础样式用Critical自动提取
2. 手动补上伪类和媒体查询部分

代码放这了，比如你的导航悬停效果要这样补：

.nav-item:hover {

  color: #ff0000;

  background: rgba(0,0,0,0.1);

}



@media (min-width: 768px) {

  .hero {

    padding-top: 120px;

  }

}

建议先用Chrome审查元素看哪些样式丢了，再针对性补全。我上次搞这个排查了俩小时，最后发现是Critical把transform属性给吃了，真是服了。

另外检查下内联样式和外部CSS是否有冲突，有时候权重问题也会导致样式不生效。

2026-03-05 14:02