CSS媒体查询中缺少选择器和规则集导致语法错误

css媒体查询必须包裹在选择器定义的规则集中，不能直接在@media块内写样式声明；否则会因缺少花括号包裹的选择器上下文而报错。

你遇到的错误源于一个常见的CSS语法误解：@media 规则本身只是条件容器，它不直接接受样式声明——所有CSS属性（如 display, justify-content, height）必须写在某个具体选择器的规则集（selector + { ... }）内部。

你当前的代码：

@media screen and (max-width: 960px) {
  display: flex;
  justify-content: spacebetween;
  height: 80px;
}

❌ 是非法的，因为：

• @media 块内缺少选择器（例如 .header, nav, #main）；
• display 等声明没有归属目标，CSS引擎无法知道“对谁应用这些样式”；
• justify-content: spacebetween 拼写错误（应为 space-between），但这属于次要问题，主因仍是语法结构缺失。

✅ 正确写法示例：

/* 假设你想为导航栏在小屏下启用弹性布局 */
.navbar {
  /* 默认样式（可选） */
}

@media screen and (max-width: 960px) {
  .navbar {
    display: flex;
    justify-content: space-between; /* ✅ 修正拼写 */
    height: 80px;
  }
}

? 关键要点总结：

• @media 后必须跟一个或多个完整规则集（即 选择器 { 属性: 值; }）；
• 不允许在 @media 内直接写孤立的属性声明；
• 可在一个 @media 块中定义多个选择器，例如：

  @media screen and (max-width: 960px) {
    .sidebar { display: none; }
    .content { width: 100%; }
    header { padding: 1rem; }
  }

• 务必检查属性名拼写（如 space-between 而非 spacebetween）、单位（80px 合法，但 height 对 flex 容器影响有限，通常需配合 align-items 或子元素设置）及浏览器兼容性。

初学时容易混淆“哪里能写样式”，记住这个口诀：有选择器，才有声明；有@media，必须套规则集。 理解了这一层结构，媒体查询就不再神秘。