html - 如何创建嵌套 > :not() statements?

Question

我现在的代码看起来像这样

body > :not(form) {
    display:none !important;
}

我试图只显示在打印屏幕的“表单”标签中找到的元素。但是，现在我意识到表单标签包含不需要的带有 id 的 div 标签，例如

<div id="logo">
<div id= "tabs">
<div id="topbar">

只有 <div id="body">是可取的。我试过做

body > :not(form) > :not(#body) {
    display:none !important;
}

和

body > :not(form) > :not(#logo) > :not(tabs) > :not(topbar) {
    display: none !important;
    form > :not(#body) {
        display:none !important;
    }
}

知道如何只让#body 元素显示在#form 元素中吗？谢谢。

Answer 1

规则 body > :not(form) > :not(#body) 将不起作用，因为如您所述，#body 元素是 within 形式，而规则的前一部分明确指出您要在 非形式 元素下搜索。

在您的情况下，两条规则的组合应该可以正常工作:

body > :not(form),
body > * > :not(#body) {
    display:none !important;
}

查看测试演示(表单标签中除了 BODY 之外的所有内容都应该被隐藏):

body >:not(form),
body > * > :not(#body) {
    display:none !important;
}

<div>DIV</div>
<form>
    <div id="logo">LOGO</div>
    <div id="body">BODY</div>
    <div id="topbar">TOPBAR</div>
</form>
<p>P</p>