javascript - 在 `*` 中使用 CSS `:not()` 和 `@media print` 仍然可以显示所有内容。是什么原因？

Question

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

添加了最外层元素，因此它包含子元素(解释使用.printable 和 .printable * 的原因)，class使用 printable，并添加样式:

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

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

Example

编辑 1

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

代码:

jQuery:

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

CSS:

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

现在没有显示。

Example 2

编辑 2

如果有人需要，请将解决方案示例放在这里(只有在将答案标记为已接受后才可用):

Example Final

Answer 1

您可以隐藏所有元素并覆盖打印媒体查询中的特定类。

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