css - Hide all elements except one div for print view

Question

posted Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

I have the following CSS for my print style:

* {
 display:none;
}

#printableArea {
 display:block;
}

I expected this to hide all elements, and only show the printableArea, however everything gets hidden. In print view, all I get is a blank page.

I have it included properly in the HEAD, with media="print" on this particular stylesheet.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-23T17:52:35+0000

If an element is not displayed, then none of its children will be displayed (no matter what their display property is set to).

* matches the <html> element, so the entire document is hidden.

You need to be more selective about what you hide.