Question

假设我的网页有这样的结构：

<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 的路径，因为它可能会改变。

Answer 1

您可能想要使用 visibility 属性。 W3Schools describes 显示和可见性属性之间的差异：visibility属性会影响元素的可见性，而不会影响其结构，即它通常占用页面的空间。

Answer 2

在顶级div设置visibility:hidden上，然后在您要设置的div visibility:visible

上

Answer 3

通过设置display:none，您需要进入并定位您不想单独显示的所有内容。如果您可以更改类名等，则应取消嵌套actual_content <div>，然后将hide_div等类添加到其他<div>，以便它们可以轻松关闭。

Answer 4

我知道你的标签显示你想要一个CSS解决方案，但 PrintArea jQuery插件非常适合你的需求：

PrintArea将指定的dom元素发送到打印机，进行维护应用于正在打印的元素的原始css样式。

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

隐藏除单个嵌套div之外的所有网页项目

4 个答案: