css媒体查询中样式规则必须嵌套在选择器规则集中，不能直接写在@media块内
你在使用 @media screen and (max-width: 960px) 时遇到的报错（如“expected curly brace”），根本原因在于：CSS不允许在媒体查询内部直接书写样式声明。你当前的代码：
@media screen and (max-width: 960px) {
display: flex;
justify-content: spacebetween;
height: 80px;
}这段代码语法非法——@media 是一个条件容器，它本身不选择任何元素，因此不能直接包含样式属性。所有 CSS 样式（如 display、justify-content）必须隶属于某个选择器规则集（selector + { ... }）。
✅ 正确写法是：先指定要修改的元素（例如 .header、nav 或 body），再将该规则集放入媒体查询中：
/* ✅ 正确：为 .navbar 在小屏下启用 Flex 布局 */
@media screen and (max-width: 960px) {
.navbar {
display: flex;
justify-content: space-between; /* 注意：正确拼写是 'space-between'，不是 'spacebetween' */
height: 80px;
}
}⚠️ 同时注意两个常见细节错误：
立即学习“前端免费学习笔记（深入）”；
- justify-content: spacebetween → 应为 justify-content: space-between（带连字符）；
- display: flex 等属性对无选择器的裸规则无效，CSS 解析器会在第 2 行就因缺少左花括号 { 报错——因为它期待的是 selector { ... }，而非孤立的声明。
? 小结：
- @media 只负责「何时生效」，不负责「作用于谁」；
- 「作用于谁」由选择器（如 .menu、#hero、main）定义；
- 所有样式声明必须包裹在 selector { ... } 内，无论是否在媒体查询中；
- 初学者常误将媒体查询当作“全局样式开关”，实则它是“带条件的选择器包装器”。
掌握这一结构逻辑，就能避免 90% 的媒体查询语法错误。
