只打印嵌套 div 中具有特定 class 的元素

Question

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

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

但这仅在 print-me 元素是 body 的直接子元素时有效。当class周围有另一个元素包裹时，如下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 中具有特定 class 的元素

Only print elements with a certain class in nested divs

html

css

media-queries