纯CSS能否实现HTML元素解包，消除多余DOM嵌套层？

不存在可以真正修改DOM父子关系、让浏览器把嵌套在.section内的.item判定为.container直接子元素的纯CSS方案。CSS本身没有调整DOM树结构的能力，所有选择器匹配、盒模型计算都完全基于浏览器加载的真实DOM树层级，没有任何语法能做到“忽略一层嵌套、让子元素变成上层节点的直接孩子”。

关于被频繁提及的display: contents属性 #

很多人会把这个属性当成“解包嵌套”的银弹，但必须明确它的实际能力和边界，不能神化：

• 当给中间的.section设置display: contents时，浏览器不会为这个元素生成任何布局盒——它本身没有边界、没有占位、不参与父容器的布局计算，它内部的所有子元素会直接参与上层最近有布局属性的父容器的排布流程。从视觉布局效果上，看起来和.section完全从DOM里删掉的效果几乎一样。
• 但它的局限性完全达不到“让.item成为.container直接子元素”的核心要求：
  • 选择器匹配完全不受影响：哪怕.section不生成布局盒，写在样式里的.container > .item规则，依然不会选中嵌套在.section内部的.item——因为选择器的直接子代判断只认真实DOM的父子层级，和渲染阶段生成不生成盒没有关系。
  • 可访问性破坏问题：设置display: contents的元素会从浏览器的可访问树中被完全移除，原本绑定在.section上的语义标签、键盘焦点、鼠标交互都会全部失效，部分老旧浏览器对该属性的实现甚至存在严重bug，会直接打乱子元素的布局计算。
  • 本质上只是临时隐藏了元素的布局表现，根本没有改变DOM的结构关系。

适配两种嵌套结构的纯CSS落地方法 #

如果你的核心目标是不管有没有.section这一层，所有.item都能按照统一的flex规则排布，完全不需要执着于“解包成直接子元素”，用下面的写法可以实现和预想一致的视觉效果，全程不需要改DOM、不需要JS：

• 给所有场景下的flex容器（也就是.container）统一设置弹性布局规则，开启子项自动排布：

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem; /* 统一子项间距，不需要给每个item单独加边距 */
}

• 给可能存在的中间嵌套层.section设置display: contents，让它不占用任何布局空间，内部的.item直接参与.container的flex布局计算：

.container > .section {
  display: contents;
}

效果验证：当不存在.section层时，上面的规则完全不会生效，所有.item作为.container的直接flex子项正常排布；当存在.section嵌套时，.section本身不生成布局占位，它内部的.item会直接顺着上层的flex容器规则参与排布，两种场景下的视觉效果完全统一。

• 注意：如果.section本身携带需要保留的语义（比如是导航、章节这类有明确可访问性意义的标签），只要给它补一个不可见的占位节点，把它从可访问树的“无盒”状态拉回来，就可以规避可访问性破坏的问题，不会影响布局效果。

如果你的需求里不仅要视觉布局一致，还要靠.container > .item这类直接子代选择器做精准的样式匹配，那纯CSS完全没有实现可能——这种场景下只能通过统一内容输出的模板结构，或者加极少量JS做DOM层级规整，没有纯CSS的绕行方案。

内容的提问来源于stack exchange，提问作者epos_jk