Распечатать CSS Скрыть тело и показать div внутри тела

Question

Я нашел слишком много информации о том, как скрыть определенные части, используя css.

Я не хочу скрывать несколько элементов div:

#flash,#menu,#anuncios { display:none; }

, но мне нужно скрыть все тело ипросто покажите div внутри тела.

Я пытался установить тело следующим образом:

body {
    display:none;
}

.print {
    display:block!important;
}

Но все скрыто.

Как скрыть все содержимоесайт только с одной командой?И показать div внутри сайта

Answer 1

Я сделал это на веб-сайте - оберните все содержимое, которое вы хотите скрыть, в какой-то тег (мой называется .main-content, и добавьте следующие стили и элементы:

<style>
    #print-message {
        display: none;
        direction: ltr;
        color: black;
        font-weight: bold;
        text-align: center;
        margin: 2rem 0;
    }
    @media print {
        .main-content {
            display: none;
        }
        #print-message {
            display: block;
        }
    }
</style>

Это div, который будет отображаться, когда пользователь пытается напечатать вещи:

<div id="print-message">
    Printing Unavailable.
</div>

Answer 2

Вы можете комбинировать селекторы все / универсальные (*) и :not:

body *:not(#flash):not(#menu):not(#anuncios) {display: none}

<div>Not here...</div>
<div id="flash">Hello</div>
<div id="menu">World</div>
<div id="anuncios">!</div>
<div>Also missing...</div>