Question

我的HTML结构就像这样

 <body>
    <form></form>
    <div></div>
    <center></center>
</body>

我想使用css或javascript隐藏＆lt; form></form>以外的所有内容。意味着输出将是这样的

<body>
    <form></form>
    <div style="display: none"></div>
    <center style="display: none"></center>
</body>

我更喜欢CSS，因为它可以在dom加载之前接管这个案例。

Answer 1

尝试将parent-child选择器与:not

一起使用

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

Answer 2

如果你想隐藏其他标签

 * {display: none;}

然后显示您想要显示的标签

form {display: block;}

您还可以尝试：not（tag_name）如果您不希望将css分配给此特定tag_name，或者您可以使用类名：not（）

显示内部表格

form, form * {display: block;}

Answer 3

您可以使用：

body * {
    visibility: hidden;
}

body form {
    visibility: visible;
}

修改

要使内部表单元素可见，只需添加：

body form * {
    visibility: visible;
}

Answer 4

您可以尝试：

 $(":not(form)").hide()

Answer 5

body > * {
    display: none;
}
form.show {
    display: block !important;
    border:1px solid #ddd;
    width:200px;
    height:300px
}

Answer 6

只是为了完成这一点。您还可以隐藏<form>之后的所有内容。

form ~ *
{
    display: none;
}

但@Beterraba的回答对你的问题肯定是正确的。