使用&进行精确控制和灵活性
假设您想要选择.demo元素，并使用:not()选择器。这时就需要使用&：
.demo { &:not() { ... } }
这将.demo和:not()合并为.demo:not()，与之前的示例.demo :not()不同。这一点非常重要，当您想要嵌套:hover交互时，需要特别注意。
.demo { &:hover { /* .demo:hover */ } :hover { /* .demo :hover */ } }
更多嵌套示例
CSS嵌套规范中包含了更多示例。如果您想通过示例了解更多关于语法的内容，该规范涵盖了各种有效和无效的示例。
接下来的几个示例将简要介绍CSS嵌套的更多特性，帮助您了解其广泛的功能。
嵌套@media
在样式表中，如果要修改选择器及其样式的媒体查询条件位于不同的地方，这可能会分散注意力。使用嵌套，您可以将媒体查询条件直接嵌套在上下文中。
为了方便起见，如果嵌套的媒体查询仅修改当前选择器上下文的样式，则可以使用最简化的语法。
.card { font-size: 1rem; @media (width >= 1024px) { font-size: 1.25rem; } }
使用&也可以：
.card { font-size: 1rem; @media (width >= 1024px) { &.large { font-size: 1.25rem; } } }
这个示例展示了使用&的扩展语法，同时也针对.large
卡片进行了定位，以展示继续工作的其他嵌套特性。
了解更多关于嵌套@media的内容。
任意嵌套
到目前为止，所有的示例都是在前一个上下文中继续或附加选择器。如果需要，您可以完全更改或重新排列上下文。
.card { .featured & { /* .featured .card */ } }
&符号表示选择器对象的引用（不是字符串），可以放置在嵌套选择器的任何位置。甚至可以多次放置：
.card { .featured & & & { /* .featured .card .card .card */ } }
虽然这个示例看起来有点没有用，但在某些情况下，能够重复选择器上下文是很方便的。
无效的嵌套示例
在嵌套中，有几种语法场景是无效的，如果您之前使用预处理器进行嵌套，可能会对此感到惊讶。关于有效嵌套语法的速查表可以在本文的理解嵌套解析器部分找到。
嵌套元素标签名
HTML元素目前需要在前面加上&符号或使用：is()进行包装。
.card { h1 { /* 🛑 h1 does not start with a symbol */ } }
通过以下语法进行修复：
.card { & h1 { /* ✅ now h1 starts with a symbol */ } /* or */ :is(h1) { /* ✅ now h1 starts with a symbol */ } }
嵌套和连接
许多CSS类命名约定依赖于嵌套能够像连接字符串一样连接或附加选择器。但在CSS嵌套中，这种方法是无效的，因为选择器不是字符串，而是对象引用。
.card { &--header { /* is not equal to ".card--header" */ } }
更详细的解释可以在规范中找到。
混合嵌套和声明
考虑以下嵌套的CSS块：
.card { color: green; & { color: blue; } color: red; }
.card元素的颜色将是蓝色。
所有混合的样式声明都会被提升到顶部，就好像它们是在嵌套之前编写的一样。更多细节可以在规范中找到。
理解嵌套解析器
要在CSS嵌套中取得最好的效果，我们可以研究解析器在处理嵌套时的工作原理。了解这一点，我们可以自信地嵌套样式，而不必经常查找规则。
首先，最简单的方法是识别触发解析器开始消耗嵌套样式的符号。
& @ : . > ~ + # [ *
这些符号应该看起来很熟悉。其中一些是组合器，一些是选择器。所以最简单的情况是，如果解析器发现您的嵌套选择器，并且它不以这些符号之一开头，它将失败，并错误地消耗您的样式。
功能检测
有两种非常好的方法来检测CSS嵌套：使用嵌套或使用
@supports检查
使用嵌套：
html { .has-nesting { display: block; } .no-nesting { display: none; } }
使用@supports检查：
@supports not ((nesting: normal)) { /* 在这里使用传统的样式 */}
这两种方法都依赖于嵌套的nesting功能。在支持的浏览器中，第一个嵌套示例将起作用，而第二个示例将被忽略。在不支持嵌套的浏览器中，情况正好相反。
总结
CSS嵌套使开发者能够以更直观和组织良好的方式编写样式规则。它有助于减少代码重复、提高可读性，并提供更好的维护性和重构能力。
使用嵌套时，确保理解如何正确放置选择器和使用&符号来连接或附加选择器。此外，熟悉无效的嵌套示例，以避免错误。
在实际使用CSS嵌套时，请记住进行功能检测，并考虑适当的回退或替代方案，以确保在不支持嵌套的浏览器中也能提供一致的体验。
最后，请记住，嵌套应该是有意义的，并且应该提高代码的可读性和可维护性。避免过度使用嵌套，以免引入样式的复杂性和性能问题。使用嵌套时，请遵循一致的命名约定和最佳实践，以确保团队成员可以轻松理解和维护代码。
