嵌套是使用 Sass 等 CSS 预处理器的核心动机之一。 如今css选择器的优先级，这个功能已经出现在标准浏览器 CSS 中，并具有类似的句型。 您可以在不依赖预处理器的情况下构建系统吗？
CSS 嵌套可以节省打字时间并使句型更易于阅读和维护。 到目前为止，您必须输入完整的选择器路径，如下所示：
.parent1 .child1,
.parent2 .child1 {
color: red;
}
.parent1 .child2,
.parent2 .child2 {
color: green;
}
.parent1 .child2:hover,
.parent2 .child2:hover {
color: blue;
}
现在，您可以将子选择器嵌套在父选择器中，例如：
.parent1, .parent2 {
.child1 {
color: red;
}
.child2 {
color: green;
&:hover {
color: blue;
}
}
}
您可以在任何级别嵌套选择器，但请注意不要超过两到五层。 嵌套级别没有技术限制，可能会使代码更难阅读，并使生成的 CSS 变得麻烦。
直到 2023 年 3 月，还没有浏览器支持嵌套 CSS 句子模式。 您需要在构建步骤中使用 CSS 预处理器（例如 Sass、Less 或 PostCSS），以便可以将嵌套代码转换为常规的完整选择器语法。 嵌套现已在 Chrome 112+ 和 Safari 16.5+ 中实现，Firefox 将在 2023 年晚些时候支持它。
image.pngCSS原生嵌套规则
您可以将任何选择器嵌套在另一个选择器中，但它必须以 &, 等符号开头。 （对于 HTMLclass）、#（对于 HTMLid）、@（对于媒体查询）、:、::、*、+、~、> 或 [。 换句话说，它不能直接引用 HTML 元素。 下面的代码无效，
选择器不被解析：
.parent1 {
/* FAILS */
p {
color: blue;
}
}
解决这个问题最简单的方法是使用 & ，它以与 Sass 相同的方式引用当前选择器：
.parent1 {
/* WORKS */
& p {
color: blue;
}
}
或者，可以这样解决：
在这个简单的示例中，它们都可以工作，但稍后使用更复杂的样式表，您可能会遇到优先级问题。
& 还允许您在父选择器上定位伪元素和伪类。 例如：
p.my-element {
&::after {}
&:hover {}
&:target {}
}
如果不使用 &，您的目标将是选择器的所有子元素，而不是 p.my-element 本身。 （同样的情况也发生在 Sass 中）。
需要注意的是css选择器的优先级，您可以在选择器中的任何位置使用 &，例如：
.child1 {
.parent3 & {
color: red;
}
}
这翻译成以下非嵌套句子：
.parent3 .child1 { color: red; }
您甚至可以在选择器中使用多个 & 符号：
ul {
& li & {
color: blue;
}
}
这适用于嵌套
