CSS原生嵌套语法来了！使用指南速览！

大家好，我是 CUGGZ。

最近在看 caniuse.com 时发现，Chrome 和 Edge 浏览器将在 109 版本实验性支持 CSS 原生嵌套语法！

1 月 10 日，Chrome 109 发布；1 月 26 日，Safari 技术预览版 162 发布。这两个浏览器版本都带来了 CSS 嵌套的实验性支持。Chrome 官方指出，添加将 CSS 样式规则嵌套在其他样式规则中的功能，将来自外部的选择器与内部规则相结合，以提高样式表的模块化和可维护性。

下面就来看看 CSS 嵌套语法是如何使用的！

基本概念

所谓的嵌套，就是将一个 CSS 规则放在另一个（嵌套规则）中，子规则的选择器将相对于父规则的选择器。这有利于代码的模块化和可维护性。原来只能在 CSS 预处理器中使用的嵌套功能，先在可以在原生 CSS 中使用。

其实，CSS 嵌套和 Sass 的嵌套类似，比如，对于以下 CSS 样式：

table.colortable td {  text-align:center;}table.colortable td.c {  text-transform:uppercase;}table.colortable td:first-child, table.colortable td:first-child+td {  border:1px solid black;}table.colortable th {  text-align:center;  background:black;  color:white;}

table.colortable {  & td {    text-align:center;    &.c { text-transform:uppercase }    &:first-child, &:first-child + td { border:1px solid black }  }  & th {    text-align:center;    background:black;    color:white;  }}

.foo {  color: red;  &:hover {    color: blue;  }}/* 相当于: */.foo { color: red; }.foo:hover { color: blue; }

.foo {  color: red;  + .bar {    color: blue;  }}/* 相当于: */.foo { color: red; }.foo + .bar { color: blue; }

div {  color: red;  input {    margin: 1em;  }}/* 无效，因为 input 是一个标识符 */

div {  color: red;  & input { margin: 1em; }  /* 有效，不再以标识符开头 */  :is(input) { margin: 1em; }  /* 有效，以冒号开头，并且等同于之前的规则 */}

a, b {  & c { color: blue; }}

:is(a, b) c { color: blue; }

.foo, .foo::before, .foo::after {  color: red;  &:hover { color: blue; }}

.foo, .foo::before, .foo::after {  color: red;}.foo:hover {  color: blue;}

#a, b {  & c { color: blue; }}.foo c { color: red; }

<b>  <c>Blue text</c></b>