如何通过Print CSS隐藏整个body并仅显示其中一个div？

你的问题出在直接隐藏了body元素——当body被设置为display:none时，它的所有子元素都会跟着被隐藏，哪怕你给子元素加了!important也没用，因为父元素已经完全从页面中移除了。

这里有几个可行的方案，你可以根据自己的HTML结构选择：

方案1：使用:not选择器（简洁首选） #

如果你的目标div带有.print类，可以直接用:not选择器排除它，隐藏其他所有元素：

body :not(.print) {
  display: none;
}
.print {
  display: block; /* 可根据目标元素类型换成inline/inline-block等 */
}

这个方法代码简洁，只要目标元素在body内，不管它是不是直接子元素都能生效。

方案2：隐藏所有子元素后单独显示目标（兼容性更好） #

如果你需要兼容一些不支持:not的旧浏览器，可以先隐藏body内的所有元素，再强制显示目标元素及其内部内容：

body * {
  display: none;
}
.print, .print * {
  display: block !important; /* !important确保覆盖隐藏规则，可根据元素类型调整display值 */
}

加上.print *是为了保证目标div内部的子元素也能正常显示，避免被body *的规则隐藏。

方案3：仅隐藏body的直接子元素（适合目标是直接子元素的场景） #

如果你的.print是body的直接子元素，可以只隐藏body的直接子元素，性能更优：

body > * {
  display: none;
}
.print {
  display: block;
}

小提示 #

• 永远不要直接设置body {display:none;}，这会让整个页面容器消失，内部元素无法独立显示。
• 根据目标div的实际类型，灵活调整display的值（比如行内元素用inline，行内块用inline-block）。

内容的提问来源于stack exchange，提问作者Renato Souza de Oliveira