使用CSS來隱藏所有的標籤，但特定的一些瓦特/沒有能力添加類

Question

我願做這樣的事情....

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

當然，這並不工作，但我在尋找的東西類似。基本上我想要白名單允許顯示的標籤。

添加的HTML中jfiddle ....

Link

基本上我只想形式和非隱藏輸入字段露面。

Answer 1

你大概的意思是：

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

不過，我不認爲這是個好主意......可否請你發展你的要求是什麼？爲什麼你需要這樣做？

Answer 2

您可以在類display添加到您要顯示的這樣做是爲了隱藏所有不具有類的那些元素：

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

不過，我會問你爲什麼要這麼做。

它可能會更有意義的一類hidden添加到要隱藏的元素，做這個：

.hidden { 
    display: none; 
} 

Answer 3

首套

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;將此類添加到您想要顯示的元素。

Answer 4

我已經創建了一個working CodePen example如何做到這一點。您需要詳細說明標籤，例如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; 
}