打印时仅显示id为printArea的div CSS规则失效问题解决方法

你之前编写的CSS规则失效，核心原因是通配选择器*会匹配DOM树内的所有节点，包括<html>、<body>这类#printArea的祖先元素。一旦祖先元素被设置display: none，其内部所有子元素无论本身设置了什么显示规则，都会随祖先一同被隐藏，最终导致整个页面内容都不显示。

打印相关的样式需要包裹在@media print媒体查询中，仅在触发打印行为时生效，避免影响页面正常浏览状态。

适配直接子元素场景 #

如果你的#printArea是<body>的直接子元素（和你给出的示例结构一致），直接使用如下CSS即可：

@media print {
  /* 重置根节点、body的显示状态，保证渲染链路正常 */
  html, body {
    display: block !important;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  /* 仅隐藏body下和打印区同级的非目标元素 */
  body > *:not(#printArea) {
    display: none !important;
  }
  /* 保证打印区本身正常渲染，适配打印页宽度 */
  #printArea {
    display: block !important;
    width: 100%;
  }
}

适配嵌套结构场景 #

如果#printArea嵌套在其他父容器内部，你需要额外保证从<body>到#printArea之间的所有父级元素都不被隐藏，逐层隐藏非打印区的兄弟节点即可。举个例子，若DOM结构为body > .main-wrap > .content-box > #printArea，对应CSS如下：

@media print {
  /* 打印区整条父级链路全部设为可见 */
  html, body, .main-wrap, .content-box {
    display: block !important;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  /* 逐层隐藏每层父容器下非打印链路的元素 */
  body > *:not(.main-wrap),
  .main-wrap > *:not(.content-box),
  .content-box > *:not(#printArea) {
    display: none !important;
  }
  /* 打印区本身可见 */
  #printArea {
    display: block !important;
    width: 100%;
  }
}

规则说明 #

• 代码中添加!important是为了覆盖元素原有高优先级样式（比如内联样式、id选择器设置的样式），保证打印规则优先生效
• 没有使用通配符批量隐藏所有元素，从根源上避免了祖先元素被隐藏导致子元素连带消失的问题
• 隐藏逻辑只针对和打印链路无关的兄弟节点，不会打断打印区的正常渲染流

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