&>div是一个嵌套选择器,用于精确匹配**当前元素的直接子元素中的div` 元素**。
&代表当前选择器的父级(即外层选择器本身)>是 CSS 中的直接子元素选择器(只匹配一级子元素,不包含孙辈及更深层次的元素)div表示要匹配的子元素标签
示例说明:
scss
.parent {
& > div {
color: red;
}
}
这段 SCSS 编译为 CSS 后是:
css
.parent > div {
color: red;
}
作用是:仅为 class="parent" 的元素的直接子级 div 应用红色文本 ,而不会影响 parent 内部更深层次的 div(如 div 中的 div)。
这种写法的优势是:
- 保持选择器的嵌套层级清晰,与 HTML 结构对应
- 避免样式意外作用到非目标元素(精确控制层级)
- 减少重复书写父选择器,使代码更简洁