假设我的网页有这样的结构：
<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 因为它可能会改变。