Css 隐藏除打印视图的一个div之外的所有元素

我的打印样式有以下CSS：

*{
显示：无；
}
#可打印区域{
显示：块；
}

我希望这会隐藏所有元素，并且只显示可打印区域，但是所有内容都会被隐藏。在打印视图中，我得到的只是一个空白页

---

我将它正确地包含在头部，在这个特定的样式表上有

media=“print”

。

如果一个元素没有显示，那么它的所有子元素都不会显示（无论其显示属性设置为什么）

*

与

元素匹配，因此整个文档被隐藏

你需要对你隐藏的东西有更多的选择

html body * {
 display:none;
}

#printableArea {
 display:block;
}

---

此外，您可能需要一个！关于#printableArea很重要，但可能不是。

如果您想使用JavaScript，您可以尝试这个甚至不需要jQuery的简单代码段：

document.body.innerHTML=document.getElementById('printableArea').innerHTML;

---

你可以试着把它放在最上面。这解决了我90%的问题，然后我只需要创建一个

.noprint

类，并将其添加到一些零散的元素中

.print_area{
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    z-index: 9999;

    background-color: #ffffff;
}

---

您采取了正确的常规方法，但希望使用

可见性：隐藏
而不是
显示：无
，以便可以将子元素设置为可见

请参见
有一种单线解决方案：

使用JQuery

var selector = '';
$(document.head).append($('style').text('*{visibility:hidden}' + selector + '{visibility:visible}'));

var selector = '';
document.head.appendChild(Object.assign(document.createElement('style'), { innerText: '*{visibility:hidden}' + selector + '{visibility:visible}' });

不带JQuery

var selector = '';
$(document.head).append($('style').text('*{visibility:hidden}' + selector + '{visibility:visible}'));

var selector = '';
document.head.appendChild(Object.assign(document.createElement('style'), { innerText: '*{visibility:hidden}' + selector + '{visibility:visible}' });

在这两个示例中，将
选择器
变量设置为所需的选择器。例如，
div#page:hover
或
p.class1，p.class2
在body标签后面做一个div包装。在wrap div之前，放置可见项的div

我必须这样做才能创建一个简单的用户名-密码页面，并且需要隐藏所有内容，除了半不透明的登录表单的背景。因此，在输入正确的凭据后，表单将显示动画，半不透明的页面封面将显示动画，最后，旁边的所有内容都将显示出来，您可以正常使用该页面。
回答，因为我在搜索时发现了此问题

代替“显示：无”，您可以使用：

* {
     visibility: hidden;
     margin:0; padding:0;
    }

    #printableArea * {
      visibility: visible;
    }

来源：
@media print{
* {
可见性：隐藏；
}
/*显示要打印的元素及其所有子元素*/
.svgContainer、.svgContainer*{
能见度：初始；
}
}

确保所有子元素也可见。请记住，不可见元素仍然会影响页面中其他元素的位置。在我（简单）的例子中，我只是添加了
位置：fixed在
.svgContainer
（其他地方）。
啊，谢谢！我想我可以把printableArea放在页面包装器的外面，然后隐藏包装器，显示print div.@FatherCarbon-这就是我刚刚实现的，看起来它能很好地完成这个任务。只有当#printableArea是body的一个直接子项时，这个操作才会起作用。这个操作将替换整个HTML，这不是一个必须的结果，它也可能会破坏一些东西。对我来说，这是开箱即用的，没有任何问题。同一个站点导致提供的CSS方法出现问题。提供的最简单的方法之一。在我第一次尝试时，这并没有隐藏所有其他内容。我无法向下或向上滚动@塞勒姆哇！你在哪张纸上打印？这是可行的，但如何使
#printableArea
移动到纸的左上角，而不是保留它在HTML/CSS结构中的位置，通过使用
可见性：hidden
？我在删除页边距和填充时没有这个问题。Altho，如果你想让它向左，确保它与左边对齐？你可以让它浮动，或者把它的位置改成绝对位置。此外，如果您遵循链接，则有人会对特定类使用
display:none
。这里的问题是，如果您在
*
选择器上执行此操作，t将隐藏所有内容，包括您希望打印的内容。在某些类上使用
显示：无
，这就是我最终要做的。它不像我所希望的那样“通用”，但它暂时会起作用。