CSS 原生嵌套语法兼容性问题

1.介绍

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

元素是通过.nav__item设置样式。要使CSS有效，使用&符号是可选的。

nav__item {
  & a {
    display: block;
    padding: 1.5rem 1rem;
  }
}

/* 等同于 */
.nav__item a {
}

您也可以选择不使用&符号：

.nav__item {
  a {
    display: block;
    padding: 1.5rem 1rem;
  }
}

/* 等同于 */
.nav__item a {
}

请注意这是一个最近的更新，被称为宽松的CSS嵌套。它适用于最新的Chrome Canary和Safari技术预览版。

2.兼容性问题

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

所以在使用原生css嵌套语法的时候一定要考虑浏览器的版本兼容性，推荐还是使用预处理器Less、Sass中使用的嵌套功能；
或用原生非嵌套写法：

.nav__item a {
	color: ‘#ffffff’
}