假设我的网页结构如下：
<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的路径，因为它可能会更改。