工具盒子

CSS Nesting 原生嵌套生成器

可视化生成 CSS 原生嵌套语法（CSS Nesting Module Level 1，2023 年起全主流浏览器原生支持）： 完整支持 & 嵌套选择器（&:hover / &.active / & + .sibling）、 嵌套 @media / @supports / @container 等 at-rule、 以及 @media 内继续嵌套选择器规则的两层嵌套结构。 iframe 隔离预览实时应用嵌套 CSS，可编辑预览 HTML，内置卡片组件、按钮状态、响应式布局、导航菜单、 表单输入、列表条纹、工具提示 8 组预设。适用于组件化 CSS、BEM 替代方案、样式作用域组织等现代前端开发场景。 所有处理在浏览器本地完成。

预设：
根选择器
:
:
:
:
:
嵌套规则（2）
:
:
:
:
:
:
实时预览（iframe 隔离）
预览 HTML（可编辑）
嵌套 CSS 代码
.parent {
  padding: 20px;
  background: #eef2ff;
  border-radius: 8px;
  color: #1e40af;
  transition: background 0.2s;

  .child {
    margin-top: 8px;
    padding: 12px;
    background: #c7d2fe;
    border-radius: 6px;
    color: #3730a3;
  }

  &:hover {
    background: #e0e7ff;
  }
}

常见问题

什么是 CSS Nesting 原生嵌套？它解决了什么问题？

CSS Nesting（CSS 嵌套模块 Level 1）是 2023 年正式落地的原生 CSS 特性， 允许在一个选择器内部嵌套定义另一个选择器的样式，语法与 Sass/Less 等预处理器的嵌套类似但由浏览器原生解析。 它解决了三大痛点：一是样式组织松散，传统 CSS 必须把同一组件的样式分散在多处，难以维护； 二是预处理器依赖，过去实现嵌套必须引入 Sass/Less 等工具，增加构建链复杂度； 三是选择器重复，传统写法需重复书写父选择器（如 .card、.card .title、.card:hover）， 嵌套写法把相关规则聚合在父选择器内部，结构更清晰。原生嵌套无需编译，浏览器直接解析，性能与原生 CSS 一致。

& 嵌套选择器是什么？什么时候必须使用 &？

& 是嵌套选择器（nesting selector），代表父选择器的引用。 它有两种用法：
显式用法（必须用 &）：当子选择器需要附加在父选择器上时， 如 &:hover（父的悬停态）、&.active（父的 active 类）、 &::before（父的伪元素）、& + .sibling（父的相邻兄弟）。 这些场景下 & 不可省略，因为浏览器需要明确知道是"附加"关系。
隐式用法（可省略 &）：当子选择器是后代关系时， 如 .child { } 等价于 & .child { }（父的后代 .child）。 浏览器会自动推断为后代选择器。但建议在可能引起歧义时显式使用 &。

嵌套 @media / @supports / @container 等 at-rule 怎么用？

CSS Nesting 允许在选择器内部嵌套 at-rule，最常见的场景是嵌套 @media 实现组件级响应式。 例如：.card { padding: 32px; @media (max-width: 768px) { padding: 16px; } } 等价于传统写法 .card { padding: 32px; } @media (max-width: 768px) { .card { padding: 16px; } }。 嵌套写法把同一组件的响应式规则聚合在一起，避免在不同断点文件中分散维护。 同理可嵌套 @supports（特性查询）、@container（容器查询）等。 本工具支持在 @media 规则内部继续嵌套选择器规则，演示两层嵌套结构。

CSS 原生嵌套与 Sass/Less 预处理器嵌套有什么区别？

两者语法相似但有本质差异：
解析方式：原生嵌套由浏览器直接解析，无需编译；Sass/Less 需要构建工具编译成传统 CSS。
性能：原生嵌套与原生 CSS 性能一致；Sass/Less 编译后的 CSS 性能也一致，但构建过程消耗时间。
功能范围：Sass/Less 还提供变量、混入、函数、循环等编程能力；原生嵌套仅提供嵌套语法， 变量需用 CSS Custom Properties（--var），混入可用 @layer 部分替代。
选择器拼接：Sass 中 & 可任意拼接（如 &__title 用于 BEM）， 原生嵌套的 & 只能作为完整选择器的引用，不能拼接字符串（如 &__title 在原生嵌套中无效）。 这是原生嵌套相对 Sass 的主要限制。

浏览器兼容性如何？哪些浏览器支持？

CSS Nesting 自 2023 年起在所有主流浏览器中已全面支持：
- Chrome 112+（2023 年 4 月）
- Edge 112+（2023 年 4 月）
- Firefox 117+（2023 年 8 月）
- Safari 16.5+（2023 年 5 月）
根据 caniuse 数据，全球浏览器支持率已超过 95%。 早期版本（2023 年前）需要 @nest 显式语法或 PostCSS 嵌套插件降级编译。 当前新项目可直接使用原生嵌套无需任何 polyfill。如需兼容旧浏览器，可用 PostCSS postcss-nesting 插件 自动降级编译为传统 CSS。

嵌套层级过深会有什么问题？最佳实践是什么？

嵌套虽好但过深会带来问题：
选择器特异性升高：每层嵌套增加一个选择器，特异性提高，后续覆盖样式更困难。
选择器长度增加：编译后选择器变长（如 .card .body .title .text），性能略降且可读性差。
耦合度上升：深层嵌套依赖父选择器结构，组件难以复用到其他位置。
最佳实践：建议嵌套不超过 3 层。组件级样式用 1-2 层嵌套组织，状态修饰（&:hover / &.active） 用 1 层。避免为了"组织代码"而深层嵌套后代选择器——优先用 BEM 命名或 CSS Custom Properties 控制样式。 本工具限制为两层嵌套（根 → 子规则 → @media 内子规则），符合大多数实际场景需求。

原生嵌套中的 & 与隐式嵌套有什么区别？何时用哪个？

显式 &：明确表示"父选择器"，用于伪类、伪元素、类名附加、兄弟选择器等"附加"关系。 如 &:hover、&.active、&::before、& + .next。
隐式嵌套：直接写选择器，浏览器推断为"后代关系"。如 .child { } 等价于 & .child { }。
关键区别：隐式嵌套只能表达"后代"关系，& 可以表达"附加"关系。当需要附加伪类/类名时必须用 &。 本工具的预设中，.title 用隐式嵌套（后代），&:hover 用显式 &（附加伪类）， 展示了两者的典型用法。建议在不确定时优先用显式 &，语义更清晰。

这个工具的预览安全吗？数据会上传吗？

完全安全，零数据上传。本工具的所有操作在浏览器本地完成：
- 嵌套结构编辑、CSS 代码生成、预览渲染全部在浏览器内存中完成，不发起任何网络请求。
- 预览区使用 iframe 的 srcdoc 属性渲染，样式与 HTML 完全隔离在 iframe 内， 不会影响主页面样式，也不会被主页面样式污染。
- iframe 设置了 sandbox 属性限制能力，预览内容无法执行脚本、提交表单或访问父页面。
- 生成的嵌套 CSS 代码仅在你本地浏览器中，点击复制按钮才会写入剪贴板。
无需注册、无需登录、无 Cookie 追踪、无广告，适合处理任何 CSS 练习与生产场景。