免费在线CSS嵌套生成器，将普通CSS转换为CSS嵌套语法（CSS Nesting），支持嵌套展开、选择器优化。兼容CSS Nesting规范，一键复制代码。纯前端工具。 | 无需注册 · 数据绝不上传服务器
零依赖·可离线使用扁平CSS ↔ CSS Nesting 互转
Updated: 2026-07-11
⚙️ 转换选项
示例：
📥 输入CSS
📤 输出结果
0 行
点击"转嵌套"或"展开嵌套"查看结果
💡 关于CSS Nesting
CSS Nesting 是CSS原生支持的嵌套语法（CSS Nesting Module Level 1），允许在样式规则内部嵌套子规则。
使用 & 符号引用父选择器。例如：
.card {
background: #0f172a;
& .title { font-size: 1.2rem; }
&:hover { box-shadow: 0 2px 8px rgba(0,0,0,.1); }
}
📌 注意事项：CSS Nesting 要求嵌套的选择器以 &、.、#、:、[、>、+、~ 开头，否则需要使用 :is() 包裹。
✅ 已复制到剪贴板