AMP限制内联CSS是为了确保同步构建样式树、避免外部依赖，仅允许一个<style amp-custom>置于head中，且禁用url()、@规则、ID选择器等，体积≤75KB并只支持有限伪类。
AMP 页面不允许任意内联 CSS——它只接受符合 amp-boilerplate 规范、且体积严格受限的内联样式，否则会直接被 AMP 验证器拒绝，页面无法通过校验。
为什么 AMP 要限制内联 CSS 的写法？
AMP 不是普通 HTML，它的 CSS 解析流程被强制简化：浏览器必须在解析 HTML 的同时同步构建样式树，不能等待任何外部资源或 JS 执行。因此 AMP 运行时会主动剥离所有不合规的 <style> 块，并仅保留两个固定位置的样式块：amp-boilerplate 和 amp-custom。前者由 AMP 运行时注入（不可修改），后者才是你唯一能写的内联 CSS 区域，但有硬性约束。
<style amp-custom> 的 4 条铁律
你只能在 <head> 中放一个 <style amp-custom>，且必须满足：
- 必须带
amp-custom属性，写成<style amp-custom>，缺属性或写成amp-custom="true"都会失败 - 内容必须是纯 CSS 规则，禁止出现
@import、@font-face、@keyframes、url()（含背景图、渐变色中的 url）、expression()等任何可能触发网络请求或计算的语法 - 总大小（未压缩）不得超过
75000字节（约 75KB），但实际建议压到50KB以内——验证器虽允许 75KB，但移动端弱网下 TTFB 明显上升，首屏渲染反而延迟 - 不能包含 ID 选择器（如
#header）、:hover以外的伪类（如:focus-within）、!important（AMP 会自动拒绝含该关键字的整条规则）
常见翻车点：你以为在写 CSS，其实 AMP 已静默丢弃
以下写法在普通 HTML 中有效，但在 AMP 中要么报错，要么被跳过：
立即学习“前端免费学习笔记（深入）”；
-
.card { background: url(/img/bg.png); }→url()被拦截，整条规则失效 -
body { font-family: 'Inter', sans-serif; }→ 字体声明被忽略（@font-face不被允许，且字体加载需通过<link rel="stylesheet">引入 Google Fonts，但 AMP 要求用<link href="https://fonts.googleapis.com/...">且必须放在<style amp-custom>之前） -
.btn:active { transform: scale(0.95); }→:active不在 AMP 允许的伪类白名单中（仅支持:hover、:focus、:visited） - 在
<body>里写<style amp-custom>→ AMP 只认<head>内的首个合法块，其余全丢
如何验证你的内联 CSS 是否真正生效？
别信本地预览，AMP 的验证是运行时行为：
- 上线前必须用 AMP Validator 检查，红色报错里明确标出哪一行被拒
- 打开 DevTools 的 Elements 面板，展开
<head>，确认只有且仅有一个<style amp-custom>，里面没有被注释掉的规则（AMP 不解析注释，但若注释里混了非法语法，仍可能引发校验失败） - 在 Network 面板勾选 Offline，刷新页面——如果首屏文字/按钮颜色/间距仍与预期一致，说明
amp-custom真正参与了渲染；若回退到无样式状态，大概率是规则被静默过滤了
最易被忽略的是：AMP 不校验 CSS 逻辑是否“合理”，只校验语法和位置。你可能写了 100 行完全合法的规则，但其中 80 行因选择器没匹配到真实 DOM（比如 SSR 渲染结构和客户端 hydration 后不一致）而从未执行——这种失效 validator 不报错，只能靠离线模式+真实 DOM 对照排查。
