如何隐藏body元素并仅显示page元素？（CSS打印场景）

我来帮你搞定这个打印场景的样式问题！你的原始CSS有个小问题：全局的 * {display:none;} 会把所有元素（包括body和page本身）都设置为隐藏，哪怕你强制显示page的子元素，page自身还是处于隐藏状态，自然无法正常显示。

下面给你两种可行的解决方案，适配不同的需求：

方案一：隐藏body的其他内容，保留page元素（推荐） #

这种方法不会完全隐藏body，而是隐藏body中除了page之外的所有内容，同时让page成为打印的核心内容，适配标准A4打印：

<!DOCTYPE html>
<html>
<head>
<title>Estimate bill</title>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<style type="text/css">
/* 隐藏body中除了目标page之外的所有直接子元素 */
body > :not(page[size="A4"]) {
  display: none;
}

/* 确保page元素以块级显示，并设置A4尺寸 */
page[size="A4"] {
  display: block;
  width: 210mm;
  height: 297mm;
  margin: 0 auto;
  padding: 15mm;
  box-sizing: border-box;
}

/* 针对打印场景优化样式 */
@media print {
  body {
    margin: 0;
    padding: 0;
  }
  page[size="A4"] {
    box-shadow: none;
    page-break-after: always;
  }
}
</style>
</head>
<body>
<page size="A4"> Hello world </page>
<!-- 这些内容会被自动隐藏 -->
<div>不需要打印的内容1</div>
<p>不需要打印的内容2</p>
</body>

代码解释： #

• body > :not(page[size="A4"])：精准选中body下所有不是size="A4"的page元素的直接子元素，设置为隐藏。
• 给page元素设置A4标准尺寸（210mm×297mm），添加内边距让内容更美观。
• @media print媒体查询：优化打印时的样式，去掉阴影，确保page元素作为单独一页打印。

方案二：完全隐藏body，强制显示page元素 #

如果你确实需要让body完全隐藏（不占用任何空间），可以通过绝对定位让page脱离文档流，这样即使body隐藏，page也能正常显示：

<!DOCTYPE html>
<html>
<head>
<title>Estimate bill</title>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<style type="text/css">
/* 完全隐藏body元素 */
body {
  display: none;
}

/* 强制显示page元素，并用绝对定位脱离文档流 */
page[size="A4"] {
  display: block !important;
  position: absolute;
  top: 0;
  left: 0;
  width: 210mm;
  height: 297mm;
  padding: 15mm;
  box-sizing: border-box;
}

/* 打印优化 */
@media print {
  page[size="A4"] {
    position: relative;
    page-break-after: always;
  }
}
</style>
</head>
<body>
<page size="A4"> Hello world </page>
</body>

注意事项： #

绝对定位的方法在普通浏览场景下可能会导致page元素位置异常，所以更推荐第一种方案，它同时适配浏览和打印场景。

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