Скрытие всех элементов веб-страницы, за исключением одного вложенного div

Предположим, что на моей веб-странице есть такой struture:

<body>
    <div id="fee">
        <div id="fi">

            <div id="actual_content">

                <p>Content</p>
                <div id="some_important_stuff">Blah</div>
                <p>More content</p>
                <span class="and_another_thing">Meh</span>

                ...
            </div>

            <div id="fo>
                ...
            </div>

            ...
        </div>

        <div id="fum">
            ...
        </div>

        ...
    </div>

    <div id="fazz">
        ...
    </div>

    ...
</body>

Я хочу создать стиль CSS для печати, который скрывает все, кроме содержимого actual_content.

Моя первая попытка была такой:

body * {
    display: none; /* Hide everything first */
}

/* Show content div and all of its ancestors */

body > #fee {
    display: block;
}

body > #fee > #fi {
    display: block;
}

body > #fee > #fi > #actual_content {
    display: block;
}

/* Unhide contents of #actual_content */

#actual_content * {
    display: block; /* Not ideal */
}

Однако, поскольку нет "display: auto" или "display: default", я испортил стили элементов actual_content, когда я пытаюсь их отобразить. Мне также не нравится жесткое кодирование пути к actual_content, поскольку оно может измениться.

Ответ 1

Вероятно, вы захотите использовать свойство visibility. W3Schools описывает разницу между свойствами отображения и видимости: свойство видимости влияет на видимость элемента, не влияя на его структуру, т.е. пространство, которое оно обычно занимает на странице.

Ответ 2

на верхнем уровне div visibility:hidden, затем на div, который вы хотите установить visibility:visible

Ответ 3

Вам нужно будет войти и настроить все, что вы не хотите отображать отдельно, установив display:none. Если вы можете изменить имена классов и т.д., Вы должны разблокировать actual_content <div>, а затем добавить классы, такие как hide_div, в другой <div>, чтобы их было легко отключить.

Ответ 4

Я знаю, что ваши теги показывают, что вы хотите использовать CSS-решение, но плагин PrintArea jQuery идеально подходит для ваших нужд:

PrintArea отправляет на принтер указанный элемент dom, поддерживая оригинальные стили css, применяемые к печатаемому элементу.

http://plugins.jquery.com/project/PrintArea