css - 使用 CSS 隐藏所有标签，但某些标签无法添加类

Question

我想做这样的事情......

body{
display:none;
}
#signIn_form_section{
display:inline;
}

当然这不起作用，但我正在寻找类似的东西。基本上我想将允许显示的标签列入白名单。

在 jfiddle 中添加了 html....

关联

基本上我只想显示表单和非隐藏输入字段。

Answer 1

我创建了一个有效的 CodePen 示例来说明如何执行此操作。您需要具体说明标签，例如section在此示例中，*:not无法正常工作。

HTML：

<section>
  <article>
    <p>I am hidden</p>
  </article>
</section>

<section class="display">
  <article>
    <p>You can see me</p>
  </article>
</section>

CSS：

section:not(.display) {
    display: none;
}

Answer 2

你可能的意思是：

 * {
     display: none;
 }
 #signIn_form_section{
     display:inline;
 }

但是，我认为这不是一个好主意……您能提出您的要求吗？为什么你需要这样做？

Answer 3

display您可以向要显示的元素添加一个类，并隐藏所有没有该类的元素：

*:not(.display) {
    display: none;
}

但是我会质疑你为什么要这样做。

hidden将类添加到要隐藏的元素并改为这样做可能更有意义：

.hidden {
    display: none;
}

Answer 4

第一套

div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video { display:none; }

然后创建一个类并将其设置为display:block;将此类添加到您要显示的那些元素中。