在`@media-print`中使用CSS `*`和`:not()`仍然可以显示一切.原因是什么

尝试选择将在window.print()上打印的内容。

添加了最外层的元素，因此它包含childs元素(使用.printable和.printable *的原因是什么)，用printable类，并添加了样式：

@media print{
*:not(.printable *, .printable){
display: none !important;
}
}

当调用window.print()时，它仍然显示所有内容。

示例

编辑1

尝试使用jQuery将notPrintable添加到所有:not(.printable, .printable *, .notPrintable)中，并在@media print上引用notPrintable。

代码：

jQuery:

$(":not(.printable, .printable *, .notPrintable)").addClass("notPrintable");

CSS：

@media print{
.notPrintable{
display: none !important;
}
}

现在什么都没显示。

示例2

编辑2

如果有人需要，请在此处列出解决方案示例(只有在答案标记为已接受后才可用)：

示例最终

您可以在打印介质查询中隐藏所有元素并覆盖特定类。

@media print{
body *:not(.printable) {
display: none;
}
}

$("body *:not(.printable, .printable *, .notPrintable)").addClass("notPrintable");

和

@media print{
.notPrintable {
display: none !important;
}
}

成功了。

"选择器"提示由@westdabestdb 提供

相关内容