@media打印CSS

我有我的這種結構HTML頁面：@media打印CSS

<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的內容進行打印。我怎樣才能做到這一點？

來源

2015-09-21 Kernel Med

你可以@media print and @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">

來源

2015-09-21 15:58:52 marcosspn

如果這是你的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>

來源

2015-09-21 15:59:28 Aaron

如果我們增加一個其他分區作爲當前第一個div的母公司，我們將有一個problemes，最理想的是有采取所有情況下與任何結構，爲examle：如果一個div有一個班的孩子要打印div應顯示：正常 –

回答

相關問題