大家好，我叫CUGGZ。最近看caniuse.com的时候发现Chrome和Edge浏览器在109版本会实验性的支持CSS原生嵌套语法！1月10日，Chrome109发布；1月26日，SafariTechnicalPreview162发布。两个浏览器版本都带来了对CSS嵌套的实验性支持。Chrome官方指出，在其他样式规则中添加嵌套CSS样式规则的能力，将来自外部的选择器与内部规则相结合，以提高样式表的模块化和可维护性。下面我们就来看看CSS嵌套语法是如何使用的吧！所谓嵌套的基本概念是将一个CSS规则放在另一个（嵌套规则）中，子规则的选择器将相对于父规则的选择器。这有助于代码模块化和可维护性。嵌套，最初只在CSS预处理器中可用，现在在原生CSS中可用。事实上，CSS嵌套类似于Sass嵌套，例如，对于以下CSS样式：table.colortabletd{text-align:center;}table.colortabletd.c{text-transform:uppercase;}table.colortabletd:first-child,table.colortabletd:first-child+td{border:1pxsolidblack;}table.colortableth{text-align:center;背景：黑色；color:white;}如果使用CSS嵌套，则为This:table.colortable{&td{text-align:center;&.c{text-transform:uppercase}&:first-child,&:first-child+td{border:1pxsolidblack}}&th{text-align:center;}背景：黑色；白颜色;}}可以看到，使用嵌套不仅消除了重复，而且通过对相关规则进行分组，提高了生成的CSS的可读性和可维护性。嵌套规则嵌套规则可以使用嵌套选择器（&）直接引用父规则的匹配元素，也可以使用相对选择器语法指定“后代”以外的关系。.foo{颜色：红色；&:hover{颜色：蓝色；}}/*等同于：*/.foo{color:red;}.foo:hover{颜色：蓝色；}.foo{颜色：红色；+.bar{颜色：蓝色；}}/*等同于：*/.foo{color:red;}.foo+.bar{颜色：蓝色；但是，以标识符开头的嵌套选择器（类型选择器）是无效的：div{color:red;输入{保证金：1em;}}/*无效，因为输入是一个标识符*/如果你想继续这样写，你需要稍微修改它：div{color:red;&input{保证金：1em;}/*有效，不再以标识符开头*/:is(input){margin:1em;}/*有效，以冒号开头，等同于前面的规则*/}更多嵌套详见CSS嵌套规范草案：https://drafts.c??sswg.org/css-nesting/嵌套选择器必须能够在使用嵌套规则时引用父规则匹配的元素。为此，规范中定义了一个新的选择器，即嵌套选择器，写为&。当在嵌套样式规则的选择器中使用时，嵌套选择器表示匹配父规则的元素。当在任何其他上下文中使用时，它指的是与该上下文中的:scope相同的元素。嵌套选择器可以通过:is()选择器替换为父样式规则的选择器。例如：a,b{&c{颜色：蓝色；}}这相当于：:is(a,b)c{color:blue;}嵌套选择器不能表示伪元素（与:is()的行为相同）：.foo,.foo::before,.foo::after{color:red;&:hover{颜色：蓝色；}}这里，&只代表.foo匹配的元素，相当于：.foo，.foo::before，.foo::after{color:red;}.foo:hover{color:blue;}嵌套选择器的特异性（权重）等于父样式规则的选择器列表中的复杂选择器Maximumspecificityin(samebehavioras:is()):#a,b{&c{color:blue;}}.fooc{颜色：红色；}DOM结构如下：
