Question

可以隐藏页面上的所有内容，只显示具有特定类别的元素。使用以下css，只应打印带有print-me个clas的元素。

@media print {
  .print-me, .print-me * {
    display: inline;
  }
  body * {
    display: none;
  }
}

但这只适用于print-me元素是body的直接子元素的情况。如果在类中包含另一个元素，如下面的html中那样，打印时不会显示任何内容。

<html>
  <body>
    <div>  
      <div class="print-me">
        <p>This text should be printed, but isn't.</p>
      </div>
      <div>
        <p>This text isn't printed.</p>
      </div>
    </div>
  </body>
</html>

Codepen; Debug View

Answer 1

正如我在评论中所建议的那样，尝试使用以下css：

@media print {
  .print-me, .print-me * {
    visibility: visible;
  }
  body * {
    visibility: hidden;
  }
}

这似乎符合您的期望。

仅在嵌套div中打印具有特定类的元素

1 个答案: