使用 :is() 伪类配合子选择器可以精准重置嵌套元素的盒模型。通过 :is(.parent *) 或更具体的层级选择，将 box-sizing 设为 border-box，确保所有后代元素继承统一的尺寸计算逻辑，避免嵌套导致的宽度溢出。
:is() 如何替代深层嵌套选择器
传统做法需要为每一层手动编写 .a .b .c { ... }，而 :is() 允许在父级上下文中匹配任意深度的后代。例如 :is(.container) * { box-sizing: border-box; } 会选中 .container 下的所有元素，包括直接子项和深层嵌套项。这种方法减少了重复代码，同时保持了样式的局部性。
* {
box-sizing: border-box;
}
.container :is(ul, ol, div) {
margin: 0;
padding: 0;
}上述代码中，全局重置确保了基础行为一致，而 :is() 则针对特定容器内的列表和块级元素进行微调。运行此代码后，无论嵌套多深，.container 内的元素都不会因默认盒模型产生额外间距。
立即学习“前端免费学习笔记（深入）”；
如何处理 all: unset 与盒模型的冲突
all: unset 会清除所有继承和非继承属性，但可能导致布局断裂。结合 box-sizing 使用时，需显式重新声明 display 和 box-sizing。例如 .nested { all: unset; display: block; box-sizing: border-box; } 可安全重置样式而不破坏结构。
.nested {
all: unset;
display: block;
box-sizing: border-box;
width: 100%;
}该片段展示了如何在重置所有样式后恢复关键布局属性。测试发现，若省略 display: block，元素可能变为内联，导致宽度设置失效。因此，显式声明是必要的。
嵌套子项在 Flex 容器中的具体表现
当嵌套子项位于 display: flex 容器中时，其默认 flex-basis 受 box-sizing 影响。若未重置，子项可能超出容器边界。通过 :is(.flex-parent > *) { box-sizing: border-box; } 可确保直接子项正确计算尺寸，避免溢出。
