@Media打印CSS [英] @Media print css
本文介绍了@Media打印CSS的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的HTML页面具有以下结构:
I have my HTML page with this structure:
<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内容.我该如何实现?
If a user tries to print the page, I want only the content of the DIV with class to-print to be printed. How can I achieve that?
推荐答案
如果这是您html的确切结构，那么它将对您有用.
If that is the exact structure of your html then this will work for you.
@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>
这篇关于@Media打印CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
