Hiding all web page items except for single nested div

问题

Suppose my web page has a struture like this:

<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>

I want to create a print CSS style that hides everything except for the contents of actual_content.

My first attempt was like this:

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 */
}

However, since there's no "display: auto" or "display: default", I mess up the styles of actual_content's items when I try to unhide them. I also don't like hard coding the path to actual_content since it might change.

回答1:

You probably want to use the visibility property. W3Schools describes the difference between the display and visibility properties: the visibility property affects the visibility of an element without affecting its structure, i.e. the space it would normally occupy on the page.

回答2:

on the top level div set visibility:hidden, then on the div you want set visibility:visible

回答3:

You'll need to go in and target everything that you don't want to show up individually by setting display:none. If you can change class names, etc, you should un-nest the actual_content <div>, then add classes like hide_div to the other <div>s so they're easy to turn off.