使用CSS隐藏所有标记,但某些标记不能添加类

使用CSS隐藏所有标记,但某些标记不能添加类,css,Css,我想做这样的事 body{ display:none; } #signIn_form_section{ display:inline; } 当然,这不起作用,但我正在寻找类似的东西。基本上,我想将允许显示的标签列为白名单 在jfiddle中添加了html 基本上,我只想显示表单和非隐藏的输入字段。您的意思可能是: * { display: none; } #signIn_form_section{ display:inline; } 然而,我不认为这是一个好主意

我想做这样的事

body{
display:none;
}
#signIn_form_section{
display:inline;
}
当然,这不起作用,但我正在寻找类似的东西。基本上,我想将允许显示的标签列为白名单

在jfiddle中添加了html

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

您的意思可能是:

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

然而,我不认为这是一个好主意。。。你能提出你的要求吗?为什么需要这样做?

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

*:not(.display) {
    display: none;
}
然而,我会问你为什么要这样做

将类
hidden
添加到要隐藏的元素中,并执行以下操作可能更有意义:

.hidden {
    display: none;
}
第一盘

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将此类添加到要显示的元素中。

我已经创建了一个关于如何执行此操作的示例。您需要具体说明标记,例如本例中的
*:not
无法正常工作

HTML:


父元素隐藏时,其所有子元素也将隐藏!。tag{display:none;}.tag.viewable{display:inline;}…..只需给那些您想要隐藏的元素一个特定的类,并将该类设置为display:none为什么不使用一个类呢
.hide{display:none;}
有什么原因你不能这样做吗?@Jackie,如果这就是你想要做的,我认为你最好隐藏一些特定的东西(可能是很多特定的东西),而不是把一些特定的东西列出来。这样更安全。@Don那么你应该在评论中分享这些想法,这样我也可以学习:)也不能控制HTML,所以我不能添加Classic。基于问题的确切细节,我认为这种方式最有意义。OP无法控制HTML,因此无法添加“show”类,但仍可以执行某种白名单。由于标记的特殊性,这种方法很脆弱。My包含的脆弱性要小得多。编辑的版本可能会导致问题;我认为原版更好。OP不能更改HTMLUsing
部分
只是为了说明,OP可以使用他们必须使用的任何东西。OP不能将
.display
类放在HTMLWhy downvote中?你可以添加一个解释。如果原因是OP无法更改HTML,则该注释是在我发布答案后添加的@Jackie,你发布了一个链接到你想应用此功能的站点,但没有指定要隐藏的内容。如果你告诉我们你想隐藏什么,那会有帮助。我不认为我发起了否决投票,但这需要在所有应该显示的元素中添加一个类。虽然最初没有明确说明,但因为我是“屏幕抓取”,所以我没有能力将类添加到标记中。这可能在您拥有控制权的情况下起作用,但由于必须将其添加到每个标记(或未显示的标记)中,这相当繁重。
<section>
  <article>
    <p>I am hidden</p>
  </article>
</section>

<section class="display">
  <article>
    <p>You can see me</p>
  </article>
</section>
section:not(.display) {
    display: none;
}