CSS 嵌套转换器

什么是 CSS 嵌套

CSS 嵌套允许您直接在父选择器的块内编写子规则和伪类，就像 Sass/SCSS 一直允许的那样，但作为原生浏览器语法 — 不需要构建步骤：

.card {
  color: #1a1a1a;

  & .title {
    font-size: 20px;
  }

  &:hover {
    background: #f5f5ff;
  }
}

原生 CSS 嵌套于 2023 年在所有主要浏览器中发布（Chrome 112、Firefox 117、Safari 17.2），& 嵌套选择器是关键部分 — 它表示完整的父选择器，无论它出现在哪里，所以 &:hover 变成 .card:hover，& .title 变成 .card .title。与 Sass/Less 相比，原生嵌套是一个子集：它支持 & 和简单的嵌套块（包括嵌套的 @media/@supports），但不支持 Sass 特定的功能，如 mixins、函数或 @extend。

为什么要再次展平

大多数工具、旧浏览器、一些 CSS 检查工具和 CSS-in-JS 管道仍然期望平面的、每条规则一个选择器的样式表。此工具采用嵌套的 CSS 并将其展开为等效的平面规则 — 与 Sass 和 PostCSS 嵌套插件执行的相同转换 — 因此您可以获得在任何地方都能工作的输出，包括尚不支持原生嵌套解析的环境。

如何使用

1. 将您的嵌套 CSS（使用 & 和/或普通嵌套块）粘贴到输入框中。
2. 展平的普通 CSS 等效项会立即出现在输出框中 — 每条规则一个选择器，& 被完全替换，嵌套不带 & 的块用后代空格连接。
3. 将结果复制或下载为 .css 文件。

转换器通过任意深的嵌套跟踪大括号深度，替换选择器中 & 的每个出现，并正确地重新包装嵌套的 @media/@supports 块，围绕在其中声明的选择器。

范围

此工具支持 仅将嵌套 CSS 展平为平面 CSS — 明确定义的、可处理的方向（反向方向，将不相关的平面规则分组到共享父级下，需要关于哪些选择器"属于一起"的启发式方法，这些方法不能被验证为普遍正确的，因此故意排除在外）。如果您的输入没有嵌套选择器，输出看起来与输入相同，只是重新格式化。

常见问题

它处理 > .child、+ .sibling 和 ~ .sibling 组合符吗？ 是的 — 像在原生嵌套中一样完全写它们（> .footer { ... }），组合符在展平的选择器中按字面保留（.card > .footer）。

逗号分隔的选择器列表会发生什么？ 每个嵌套规则在两侧都可以有一个逗号分隔的选择器列表；该工具展开每个父 × 子组合，匹配原生嵌套语义。

它支持嵌套的 @media 或 @supports 吗？ 是的 — 嵌套在规则内的（或包含嵌套规则的）at 规则会在展平的选择器周围重新包装，保留其条件文本。

它会验证我的 CSS 吗？ 不 — 这是一个结构转换器，而不是 CSS 验证器。格式错误的输入（括号不平衡）会尽力解析；如果解析完全失败，输出会显示一个简短的错误注释，而不是抛出。

隐私

所有转换都在您的浏览器中进行 — 您的 CSS 永远不会被上传或存储在任何地方。