本文介绍一种纯 CSS 方案，通过组合 :not() 与 :has() 伪类，精准排除 .print 容器本身、其所有祖先和后代节点，从而安全地隐藏页面中其余所有元素，且完全保留打印区域内部元素的原有 display 值及其他样式。
本文介绍一种纯 css 方案，通过组合 `:not()` 与 `:has()` 伪类，精准排除 `.print` 容器本身、其所有祖先和后代节点，从而安全地隐藏页面中其余所有元素，且完全保留打印区域内部元素的原有 `display` 值及其他样式。
在构建专用打印视图时，一个常见需求是：仅显示带有 .print 类的容器及其完整 DOM 路径（即该容器自身、所有父级祖先、所有子级后代），而将页面其余所有元素隐藏。关键约束在于：不能覆盖 .print 区域内元素原本设置的 display 值（如 flex、grid、block 等），否则会破坏布局结构。
直接使用 display: unset 或 display: initial 是不可靠的——它会强制重置为浏览器默认值，可能破坏精心设计的弹性布局或网格系统。理想方案应做到「零干预」：对 .print 路径内任何节点，CSS 不声明 display，让其自然继承或保持原有声明。
✅ 正确解法是利用现代 CSS 选择器的逻辑组合能力：
/* 隐藏所有 div，但明确排除三类节点： */
:not(.print, :has(.print), .print *) {
display: none;
}该规则含义清晰：
-
.print：排除.print元素自身； -
:has(.print)：排除所有包含.print的祖先元素（如外层div包裹了.print）； -
.print *：排除.print下所有后代元素（注意：此选择器匹配的是.print的子孙，不包括.print自身）。
⚠️ 注意事项：
-
:has()是 Level 4 CSS 选择器，目前在 Chrome 105+、Firefox 117+、Safari 15.4+ 中已稳定支持；若需兼容旧版 Safari 或 IE，需搭配 JavaScript 回退方案； - 该规则需放在通用样式之后，避免被更具体的选择器覆盖；
- 若目标元素不限于
<div>，可将 <code>div替换为*（但需谨慎，通配符可能影响性能）；更推荐按需指定标签（如section,article,main）或添加统一打印作用域类（如.print-scope *）； - 为确保打印时样式生效，建议将该规则置于
@media print { ... }块内，并配合body { margin: 0; }等基础重置。
完整示例（精简版）：
<style>
div {
width: 100px; height: 100px; border: 1px solid red;
}
@media print {
/* 打印时启用隐藏规则 */
:not(.print, :has(.print), .print *) {
display: none !important; /* !important 可选，用于对抗内联样式 */
}
}
</style>
<body>
<div>❌ 隐藏</div>
<div>c
<div>b
<div class="print">p <!-- ✅ 保留原样 -->
<div>a</div> <!-- ✅ 保留原样 -->
</div>
<div>❌ 隐藏</div>
<div>❌ 隐藏</div>
</div>
</div>
<div>❌ 隐藏</div>
</body>总结：此方案以声明式、无副作用的方式实现了「路径级白名单」控制，无需 JavaScript、不篡改原有样式、语义清晰、易于维护，是现代 CSS 在打印场景下的最佳实践之一。
