CSS 嵌套规则详解
使用原生 CSS 嵌套语法，像预处理器一样组织样式，减少重复并提高可维护性。 · 难度：入门 · +15XP
原生 CSS 嵌套：终于来了
CSS 嵌套（CSS Nesting）允许你将子选择器直接写在父选择器内部，类似于 Sass/SCSS 的语法。这大大减少了重复书写选择器，使样式表结构更清晰。该功能已获得所有主流浏览器支持（2025年）。
基本语法
使用 & 符号代表父选择器，也可以省略 & 直接写子选择器（但有限制）。
.card {
background: white;
border-radius: 8px;
padding: 16px;
/* 子选择器嵌套 */
.title {
font-size: 1.5rem;
color: #333;
}
/* 使用 & 连接伪类 */
&:hover {
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
/* & 也可以放在后面 */
.dark-theme & {
background: #222;
color: #eee;
}
}
嵌套规则与限制
| 语法 | 示例 | 是否允许 |
|---|---|---|
| 直接嵌套元素选择器 | .parent { div { ... } } | ✅ 允许 |
| 直接嵌套类选择器 | .parent { .child { ... } } | ✅ 允许 |
| 包含 & 的复合选择器 | .parent { &.active { ... } } | ✅ 允许 |
| 没有 & 的伪类 | .parent { :hover { ... } } | ❌ 必须写 &:hover |
| 媒体查询嵌套 | .parent { @media (...) { ... } } | ✅ 允许 |
媒体查询嵌套
你可以将媒体查询直接写在样式规则内部：
.sidebar {
width: 300px;
@media (max-width: 768px) {
width: 100%;
order: -1;
}
}
与预处理器嵌套的区别
- 解析方式不同：原生嵌套是浏览器原生解析，无需编译。
- 选择器限制：原生嵌套不能在某些无效位置使用（如
&后面直接跟空格会导致解析错误）。 - 性能：原生嵌套不会增加选择器特异性，但嵌套过深仍会影响性能。
最佳实践
- 嵌套不超过 3 层，避免过度嵌套。
- 优先使用类选择器而非元素选择器进行嵌套。
- 利用
&创建 BEM 风格的修饰符：.btn { &--primary { ... } }（注意：原生 CSS 中&--primary会被解析为.btn--primary）
在右侧编辑器中查看嵌套的样式如何编译为等效的平面选择器。