是否可以使用 CSS 中的 :not pseudo-class 来否定接收 display:none 的元素？

Question

<html>
<body>
<nav>....</nav>
<article>more things...</article>
<div id="myModal" class="modal">contents</div>
<body>
</html>

在链接的 CSS 文件中（使用 Chrome）：

@media print{
body:not(#myModal){
    display:none;
    visibility:hidden;
}
#myModal{ /*shouldn't have to but doesn't work anyway */
    display:block;
    visibility:visible;
}
}

这不起作用。我试图在没有脚本的情况下摆脱打印模式背后的一切。显然这是不可能的。 display:none :not 可以否定容器中包含的元素吗？

编辑：我看过这里，但找不到答案。 https://www.w3.org/TR/css3-selectors/#negation

编辑：我想隐藏除模态框以外的所有内容。但是 display:none 阻止了这种情况的发生。不管我是否定的，它都是为全身元素做的。

编辑：无论是什么，它在媒体通话中都不起作用，所以我目前的想法是移动div。我认为可能有更好的方法。编辑：我还需要 display:none 因为打印仍会打印隐藏元素的空白页。 display 将删除这些元素并允许我打印我的模态，而不会出现一堆隐藏元素的空白页。

Answer 1

display: none 不加载元素或其子元素。对于Chrome、火狐等，#myModal不存在。因此，您不能使用 display: none 作为方法。

不过还有其他选择：

选项 1

@media print {

    * {
       visibility: hidden;
       height: 0 !important; /* added !important with info from update */
    }

    #myModal {
        visibility: visible;
        height: auto !important;
    }

}

<body>
<nav>....</nav>
<article>more things...</article>
<div id="myModal" class="modal">contents</div>
<button onclick="window.print();">Print</button>
<body>

选项 2

这可能不适用于您的新更新。

@media print {
    body > *:not(#myModal) {
        display: none;
    }
}

<body>
<nav>....</nav>
<article>more things...</article>
<div id="myModal" class="modal">contents</div>
<button onclick="window.print();">Print</button>
<body>

是否可以使用 CSS 中的 :not pseudo-class 来否定接收 display:none 的元素？

Is it possible to negate an element from receiving display:none using the :not pseudo-class in CSS?

css

pseudo-class

negation

选项 1

选项 2