CSS不支持嵌套语法，所谓“嵌套选择器”实为层级选择器，包括后代、子、相邻兄弟和通用兄弟选择器，用于根据HTML结构匹配元素；而SASS的嵌套是编译时的语法糖，可生成对应CSS选择器，提升代码可读性与维护性，两者本质不同，纯CSS中无法使用类似SASS的嵌套写法。
CSS原生选择器本身不支持像SASS那样的嵌套语法，但可以通过层级选择器实现类似的效果。很多人将CSS的后代选择器、子选择器等称为“嵌套选择器”，其实这是一种误解——它们只是用来描述HTML结构中元素层级关系的选择方式，并非真正意义上的“嵌套写法”。
CSS中的层级选择器
CSS提供了多种方式来选择位于其他元素内部的元素，这些就是所谓的“层级选择器”。它们帮助开发者根据DOM结构精确地应用样式。
- 后代选择器（空格分隔）：选择某个元素内部的所有指定后代元素。例如 div p 会选择所有在 div 内部的 p 元素，无论嵌套多深。
- 子选择器（>）：仅选择直接子元素。例如 div > p 只会选中 div 的直接子级 p，不会影响更深层的后代。
- 相邻兄弟选择器（+）：选择紧接在某元素后的兄弟元素。如 h1 + p 会选择紧跟在 h1 后面的第一个 p。
- 通用兄弟选择器（~）：选择某元素之后的所有同级元素。比如 h1 ~ p 会选中 h1 之后所有同层级的 p 元素。
SASS中的真实嵌套语法
SASS是一种CSS预处理器，它允许使用真正的嵌套规则，让代码结构更清晰、更易维护。这种嵌套在编译后会被转换成标准的CSS选择器。
例如：
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
display: inline-block;
}
a {
text-decoration: none;
}
}
会被编译为：
立即学习“前端免费学习笔记（深入）”；
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
text-decoration: none;
}
可以看出，SASS的嵌套本质上是生成对应的后代选择器，简化了书写过程。
CSS与SASS嵌套的本质区别
关键在于：CSS没有嵌套规则的语法结构，而SASS有。SASS嵌套是为了提升开发效率和可读性，最终输出的仍是扁平的标准CSS。
- CSS层级选择器是运行时的行为，依赖HTML结构。
- SASS嵌套是编译时的语法糖，属于开发阶段的组织方式。
- 不能在纯CSS中写 div { span { color: red; } }，这是无效语法。
