本文介绍一种纯 CSS 方案，通过组合 :not() 与 :has() 伪类，精确排除 .print 容器及其祖先、后代元素，实现“仅显示打印路径内节点、其余一律隐藏”，且不干扰其原有 display 值。
本文介绍一种纯 css 方案，通过组合 `:not()` 与 `:has()` 伪类，精确排除 `.print` 容器及其祖先、后代元素，实现“仅显示打印路径内节点、其余一律隐藏”，且不干扰其原有 `display` 值。
在构建打印专用视图时，一个常见需求是：仅保留指定打印容器（如 直接使用 ✅ 正确解法是：用单一 该规则含义为：“匹配所有既不是 此方案真正实现了“零侵入”：不修改 <div class="print">）及其完整 DOM 路径（即该容器自身、所有祖先和所有后代），而将页面中其余所有元素隐藏。关键约束在于：不能覆盖 <code>.print 区域内元素原本设置的 display 值（如 flex、grid、block 等），否则会破坏布局结构。:not(:has(.print)) { display: none; } 仅能隐藏“不含 .print 后代”的元素，但无法保护 .print 的祖先节点（例如包裹 .print 的外层 <div> 仍可能被误删）；而若再添加 <code>.print, .print * { display: unset; }，则存在风险——unset 会回退到继承值或初始值，可能意外重置开发者显式声明的 display: flex 等关键布局属性。:not() 规则，同时排除三类目标：
.print 自身（确保它不被隐藏） .print 的祖先（:has(.print)） .print 的后代（.print *）/* 安全隐藏非打印路径内所有 div */
:not(.print, :has(.print), .print *) {
display: none;
}
.print 元素、也不包含 .print 子树、也不是 .print 后代的 <div> 元素”，从而精准保留整条打印路径（从根祖先到最深后代），其余一概隐藏。<p>⚠️ 注意事项： </p>
<ul>
<li>
<code>:has() 是现代 CSS 选择器（Chrome 105+、Firefox 121+、Safari 15.4+ 支持），旧版浏览器需降级方案（如 JS 切换 class）；
div，生产环境建议限定为 * 或具体语义化标签）； .print 区域，该方案依然有效——:has(.print) 会匹配任意含 .print 的祖先，确保所有相关路径均被保留； * 通配符全局重置，推荐作用于特定上下文（如 @media print { ... } 内），防止影响屏幕样式。.print 内任何节点的原有样式声明，仅通过逻辑排除完成隔离，是纯 CSS 实现打印区域聚焦的理想实践。
