Html @媒体打印css_Html_Css_Printing_Media

Html @媒体打印css

html css printing

Html @媒体打印css,html,css,printing,media,Html,Css,Printing,Media,我的HTML页面具有以下结构： <html> <head></head> <body> <nav> .... navigation menu </nav> <div> <div></div> <div class="to-print"> <h2>My div to display in print

我的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>


....  导航菜单
要在打印模式下显示的我的div
……内容。。。。
.... HTML元素

如果用户试图打印页面，我只希望打印类为

的DIV的内容。如何实现这一点？
您可以通过@media print和@media screen来定义要打印的内容和屏幕上显示的内容
 @media print {
       .to-print {
           --css to show content--
       }
 }

 @media screen {
       .to-print {
           --css to not show content--
       }
 }

或
创建一个新的css并包括如下内容：
  <link rel="stylesheet" type="text/css" href="/print.css" media="print">

如果这是html的精确结构，那么这将适用于您

@媒体打印{
导航，
div>div:not（.to打印），
div+div:not（.to打印）{
显示：无；
}
}
/*因此，您可以看到样式对要隐藏在打印之外的元素起作用*/
导航，
div>div:not（.to打印），
div+div:not（.to打印）{
颜色：红色；
}

....  导航菜单
要在打印模式下显示的我的div
……内容。。。。
.... HTML元素
如果我们添加另一个div作为当前第一个div的父级，我们将遇到一个问题，理想的做法是对任何结构都进行处理，例如：如果一个div有一个子类要打印，那么div应该显示为：normal