CSS媒体查询中缺失选择器与规则集：常见语法错误解析

本文详解css媒体查询报错“expected curly brace”根本原因——媒体查询内必须包裹完整规则集（含选择器和花括号），不可直接书写样式声明。

在CSS中，媒体查询（@media）本身不是样式容器，而是一个条件包装器。它只能包裹完整的CSS规则集（ruleset），而每个规则集必须由选择器 + 花括号 {} + 声明块构成。你遇到的报错：

@media screen and (max-width: 960px) {
  display: flex;           /* ❌ 错误：无选择器，无法生效 */
  justify-content: spacebetween; /* ❌ 拼写错误：应为 space-between */
  height: 80px;            /* ❌ 错误：孤立声明，无归属元素 */
}

之所以提示“expected curly brace on line 2/3/4”，是因为CSS解析器在@media块内期望先看到一个选择器（如 .nav, header, #main），紧接着是 {，然后才是样式声明。当前代码跳过了选择器环节，直接写属性，这违反了CSS语法规范——所有样式声明必须隶属于某个选择器。

✅ 正确写法示例（为导航栏添加响应式布局）：

/* 先定义基础样式（可选） */
.navbar {
  display: flex;
  justify-content: space-between;
  height: 80px;
  background: #333;
}

/* 在媒体查询中，针对同一选择器重写样式 */
@media screen and (max-width: 960px) {
  .navbar {
    flex-direction: column;     /* 移动端改为纵向排列 */
    height: auto;               /* 高度自适应 */
    padding: 1rem;
  }
}

⚠️ 注意事项：

• justify-content: spacebetween 是无效值，正确写法是 space-between（带连字符）；
• 媒体查询内不能单独出现声明，也不能嵌套在另一个规则集内（例如不能把 @media 写在 .class { ... } 大括号里）；
• 若需批量修改多个元素，可使用逗号分隔多个选择器：

  @media (max-width: 768px) {
    .header, .main, .footer {
      padding: 1rem;
      font-size: 0.9rem;
    }
  }

? 总结：CSS没有“全局样式作用域”。每一条 property: value; 都必须明确作用于某类元素——即通过选择器绑定。媒体查询只是为这些绑定增加“触发条件”，它本身不替代选择器。养成“先写选择器、再写 {}、最后填声明”的习惯，即可避免此类语法错误。