gpt4 book ai didi

html - @Media 打印 css

转载 作者:可可西里 更新时间:2023-11-01 13:06:17 25 4
gpt4 key购买 nike

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

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com