CSS实现：保留.print容器及其关联节点显示且不覆盖原有display属性

嘿，我完全get你的需求了——要让.print容器、它的所有祖先和后代保持原有样式丝毫不改，只把其他无关元素统统隐藏，还得尽量不用JavaScript对吧？你之前的写法问题出在先全局隐藏再强制重置，这会不小心覆盖.print内部元素原本的display属性，咱们换个思路，精准定位要隐藏的元素就好了。

给你一套完美适配需求的CSS规则，完全不会改动任何需要保留的节点样式：

/* 只隐藏与.print完全无关的元素：既不是.print本身/后代，也不包含.print的元素 */
:not(.print):not(.print *):not(:has(.print)) {
  display: none;
}

咱们拆解下这个选择器的逻辑：

• :not(.print)：直接排除.print元素本身
• :not(.print *)：排除.print的所有后代元素，确保内部节点样式不受影响
• :not(:has(.print))：排除那些自身包含.print作为后代的元素（也就是.print的所有祖先节点，比如你例子里包含c、b的div）

这三个条件叠加后，剩下的就只有完全和.print无关的元素，咱们只对这些元素设置display:none，完美避开所有需要保留的节点，自然不会覆盖它们原有的display属性——哪怕.print内部有block、flex这类自定义布局，也能原封不动保留。

下面是适配你示例的完整代码，直接就能测试：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 100px;
  height: 100px;
  border: 1px solid red;
}

/* 核心规则：精准隐藏无关元素 */
:not(.print):not(.print *):not(:has(.print)) {
  display: none;
}

/* 可选：给.print加个蓝色边框方便区分 */
.print {
  border-color: blue;
}
</style>
</head>
<body>
<div></div> <!-- 会被隐藏 -->
<div>c <!-- 保留显示 -->
  <div>b <!-- 保留显示 -->
    <div class="print">p <!-- 保留原有样式 -->
      <div style="display: flex;">a</div> <!-- flex属性不会被覆盖 -->
    </div>
    <div></div><!-- 会被隐藏 -->
    <div></div><!-- 会被隐藏 -->
  </div>
</div>
<div></div><!-- 会被隐藏 -->
</body>
</html>

小提醒：:has()是CSS Selectors Level 4的特性，现在Chrome 105+、Firefox 121+、Safari 15.4+这些主流浏览器都支持了，如果需要兼容更老的浏览器可能得调整，但这是不用JavaScript的最优解啦。

备注：内容来源于stack exchange，提问作者Bálint Réthy