本文介绍如何利用 CSS :is() 伪类与嵌套语法中的 & 符号，简洁、无冗余地匹配“直接位于 下的 ”和“位于 > 下的 ”，避免重复书写 body > 前缀。
本文介绍如何利用 css `:is()` 伪类与嵌套语法中的 `&` 符号，简洁、无冗余地匹配“直接位于 `
` 下的 `` 下的 ``”，避免重复书写 `body >` 前缀。
在现代 CSS（特别是支持嵌套语法的环境，如 Sass、Less 或原生 CSS 嵌套草案已获主流浏览器支持）中，& 表示父选择器的引用，结合 :is() 可以显著提升复杂层级选择器的可读性与可维护性。
原始需求等价于以下冗余写法：
body > section,
body > div > section {
background-color: lightblue;
padding: 10px;
border: 1px solid blue;
}但借助 & 和 :is() 的组合，可将其精简为：
body {
:is(&, & > div) > section {
background-color: lightblue;
padding: 10px;
border: 1px solid blue;
}
}✅ 解析说明：
立即学习“前端免费学习笔记（深入）”；
-
&在body { ... }块内展开为body； -
:is(&, & > div)即:is(body, body > div)； - 整体
:is(body, body > div) > section精确匹配：-
body > section（一级 section） -
body > div > section（二级 section，且其父级div是body的直接子元素）
-
- 不会误选
body > div > div > section等深层嵌套结构，完全符合题设逻辑。
⚠️ 注意事项：
- 此写法依赖 CSS 嵌套语法（CSS Nesting Module Level 3），目前 Chrome 119+、Firefox 120+、Safari 17.4+ 已原生支持；若需兼容旧版浏览器，建议通过 PostCSS（如
postcss-nesting）或构建工具预处理。 -
:is()内部不支持伪元素（如::before）或某些伪类（如:has()在部分旧实现中受限），但本例中仅含简单复合选择器，完全安全。 - 避免滥用嵌套深度——过度嵌套仍会降低可维护性，建议层级控制在 3 层以内。
? 进阶提示：
若未来需扩展至 body > article > section，只需修改 :is() 列表：
body {
:is(&, & > div, & > article) > section { /* ... */ }
}语义清晰、零重复、易扩展——这正是现代 CSS 模块化思维的核心优势。
