我的 HTML 页面结构如下:
<html>
<head></head>
<body>
<nav>
.... navigation menu
</nav>
<div>
<div></div>
<div class="to-print">
<h2>My div to display in print mode<h2>
<section>
<article>....content....</article>
</section>
</div>
<div></div>
</div>
<div>
.... HTML elements
</div>
</body>
</html>
如果用户尝试打印页面，我只想打印类为 to-print 的 DIV 的内容。我怎样才能做到这一点？
最佳答案
如果这是您的 html 的确切结构，那么这对您有用。
@media print {
nav,
div > div:not(.to-print),
div + div:not(.to-print) {
display: none;
}
}
/* So you can see the styles working on the elements you want to hide outside of print */
nav,
div > div:not(.to-print),
div + div:not(.to-print) {
color: red;
}<nav>
.... navigation menu
</nav>
<div>
<div></div>
<div class="to-print">
<h2>My div to display in print mode<h2>
<section>
<article>....content....</article>
</section>
</div>
<div></div>
</div>
<div>
.... HTML elements
</div>关于html - @Media 打印 css，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32699436/