使用css嵌套选择器的关键在于逻辑清晰、避免冗余。1. 嵌套应反映html结构，如.navbar内嵌.nav-link，但建议不超过两到三层，防止“面条式”嵌套；2. 合理使用&符号引用父级，生成复合类或伪类，如.btn.btn-primary和.btn:hover，但需避免编译出冗余类名；3. 避免过度依赖嵌套，考虑样式是否真需要父级依赖，能不嵌套则不嵌，提升复用性与可维护性。
写CSS的时候，嵌套选择器用得好，能让代码更清晰、结构更明确。但用不好，反而会让样式混乱、难维护。关键在于怎么嵌套得有逻辑、不冗余。
1. 利用嵌套反映HTML结构
SCSS或Sass这类预处理器支持嵌套语法，合理利用可以让你的CSS结构和HTML结构对应起来。比如一个导航栏组件：
.navbar {
background: #333;
.nav-link {
color: white;
&:hover {
color: lightblue;
}
}
}这样一看就知道.nav-link是.navbar的一部分，结构一目了然。但注意别嵌太深，三层以上就容易失控了。
立即学习“前端免费学习笔记（深入）”；
- 建议最多嵌套两到三层
- 避免出现像
.a .b .c .d {}这样的“面条式”嵌套
2. 控制嵌套中的父选择器引用
在嵌套中经常要用到&符号来引用父级，特别是在写状态类或者修饰类时特别有用。例如：
.btn {
background: blue;
&.btn-primary {
background: darkblue;
}
&:hover {
background: lightblue;
}
}这里用了&来生成.btn.btn-primary和.btn:hover，而不是嵌套出新的层级。这种方式能保持类名清晰，也方便控制具体样式优先级。
- 多用于伪类（如
:hover,:focus）和BEM风格的修饰类 - 注意不要滥用，否则编译出来的类名可能重复或冗余
3. 避免过度依赖嵌套带来的“便捷”
嵌套虽然看起来方便，但它会自动拼接选择器，导致最终生成的CSS比你想象的复杂。比如：
.container {
.item {
color: red;
}
}会被编译成：
.container .item {
color: red;
}如果你原本只是想写 .item，那这就多加了一层父子关系，可能会干扰其他地方的样式。所以嵌套前要想清楚：这个样式是不是真的需要依赖父元素？
- 能不嵌套就不嵌，尤其是通用组件
- 有时候直接写类名反而更直观、更容易复用
总的来说，CSS嵌套是个好工具，但要适度使用。结构清晰、语义明确才是目的，别为了嵌套而嵌套。基本上就这些，不复杂但容易忽略。
