使用CSS隱藏打印內容

我正在尋找一種簡單的方法來隱藏除某個div及其內容之外的所有內容。使用CSS隱藏打印內容

<html> 
    <head></head> 
    <body> 
    <div class="header">...</div> 
    <div class="menu">...</div> 
    <div class="content">...</div> 
    <div class="footer">...</div> 
    </body>. 
</html>

因此，舉例來說，如果我想只打印div.content，我會做這樣的：

.header, .menu, .footer { 
    display: none; 
}

如果佈局是複雜的，它變得凌亂。有沒有更容易的方法來做到這一點與CSS？

來源

2011-01-27 Dziamid

您可以按照文章只打印您想要的div！ http://stackoverflow.com/questions/2255291/print-the-contents-of-a-div – BillDo168 2014-10-28 02:58:05

我做到了CSS3的方法：不使用類僞直接祖先（兒童）

/* hide all children of body that are not #container */ 
body > *:not(#container) { 
    display: none; 
} 
/* hide all children of #container that are not #content */ 
#container > *:not(#content) { 
    display: none; 
} 
/* and so on, until you reach a div that you want to print */ 
#content > *:not(#print_me) { 
    display: none; 
}

這樣就可以消除，除非你想打印，即使在非常複雜的佈局什麼的一切。：這裏不是非常高效，因爲它會考慮到您對html的任何未來修改。

來源

2011-02-17 00:04:27 Dziamid

@media print { 
.noPrint { 
    display:none; 
    } 
}

現在您需要將類noPrint應用於要在打印中隱藏的元素。

這是專門使用樣式表進行打印，並和設置它的媒體屬性來print好的做法。

例子：

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

來源

2011-01-27 13:33:09 Sarfraz

確定在指定了所有其他樣式部分後添加打印部分。這樣，打印語句將在打印時覆蓋其他樣式。 – Mike 2011-01-27 13:40:27

問題說：`尋找一個簡單的方法來隱藏除了某個div以外的所有東西` – Pooya 2016-01-18 10:47:28

指定打印網頁時，它定義的行爲單獨的CSS文件。

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

，然後內的文件只是定義：

.header, .menu, .footer { display: none; }

來源

2011-01-27 13:33:54 Tr1stan

您可以使用類。

.classHide{display: none}

根據您使用的語言，當if == true時，您可以添加一個類到頁眉，菜單和頁腳。

所以你不需要使用另一個CSS文件。

來源

2011-01-27 13:40:40 Thiago

根據您的HTML結構（和瀏覽器，你需要支持，因爲IE6不支持這一點），你可以隱藏所有頂級的div和只顯示一個/幾個要顯示：

body > div { 
    display: none; 
} 

#content { 
    display: block; 
}

來源

2011-01-27 14:03:05 RoToRa

使用CSS隱藏打印內容

回答

相關問題