主题自定义 CSS 报 Invalid CSS 怎么修

现象#

在主题编辑器某个 section 的自定义 CSS 框里粘贴一段带 @media 的样式，输入框下方立刻出现 Invalid CSS，光标移开后代码被清空，保存按钮变灰。

原因#

• 编辑器内置的 CSS 校验器语法覆盖面比浏览器窄，较新的属性或嵌套写法会被判非法
• 自定义 CSS 框只接受声明块，直接写 @import、@charset 这类顶层规则会被拒
• 花括号或分号不配对时，校验器从出错位置起整段丢弃，看起来像全部被清空
• 把 SCSS 的变量、嵌套与 & 符号混进了纯 CSS 输入框，编译器无法解析

处理步骤#

1. 先把这段样式贴到 assets/base.css 末尾保存，绕开编辑器输入校验
2. 再逐段回填：每次只留一个选择器，通过后再加下一段，锁定被拒的那条
3. 检查 !important 前是否多写了分号，这是最常见的被拒写法
4. 把嵌套规则展开成扁平选择器，或改用 {% style %} 写进 section 文件
5. 需要媒体查询时确认 @media 块的括号成对闭合，不要跨块嵌套

验收标准#

该 section 的自定义 CSS 框不再出现红字，保存后前台刷新，目标元素在 375px 与 1440px 两个宽度下样式都生效。