隱藏一個div

Question

內特定的表我裏面有我的SharePoint頁面下面的HTML： -

<div id="ctl00_PlaceHolderLeftNavBar_ctl02_WebTreeView"> 
<table cellspacing="0" cellpadding="0" style="border-width:0;"> 
<table cellspacing="0" cellpadding="0" style="border-width:0;"> 
<table cellspacing="0" cellpadding="0" style="border-width:0;"> 

<table cellspacing="0" cellpadding="0" style="border-width:0;"> 
<table cellspacing="0" cellpadding="0" style="border-width:0;"> 
<table cellspacing="0" cellpadding="0" style="border-width:0;"> 
</div> 

現在我想隱藏在div裏面所有的表，除了第三表。任何人都可以建議嗎？我用使用以下來隱藏所述第一表中： -

#ctl00_PlaceHolderLeftNavBar_ctl02_WebTreeView > table:first-child { display: none !important; 
} 

Answer 1

使用:not，和:nth-child(n)選擇：

#ctl00_PlaceHolderLeftNavBar_ctl02_WebTreeView > table:not(:nth-child(3)) { 
    display: none; 
} 

• :not(selector)選擇每個元素，除了所述一個內的選擇器匹配parentesis。

• nth-child選擇是其父項的第n個子項的元素。

此外

避免使用!important，除非你真的需要它。它會弄亂你的代碼。

Answer 2

您可以使用:not選擇

#ctl00_PlaceHolderLeftNavBar_ctl02_WebTreeView > table:not(:nth-child(3)) { 
    display: none !important; 
} 

:not比它提到的child-element選擇其他。

!important覆蓋用於該表的任何以前的屬性。

Answer 3

在你需要支持IE8或以下的情況下，:not/:nth-child選擇將是不支持的（雖然:first-child是在IE8支持）。如果是這樣的話，我會建議在第三個表中添加一些內聯樣式。

HTML：

<div id="ctl00_PlaceHolderLeftNavBar_ctl02_WebTreeView"> 
<table cellspacing="0" cellpadding="0" style="border-width:0;"> 
<table cellspacing="0" cellpadding="0" style="border-width:0;"> 
<table cellspacing="0" cellpadding="0" style="border-width:0; display:block;"> 

<table cellspacing="0" cellpadding="0" style="border-width:0;"> 
<table cellspacing="0" cellpadding="0" style="border-width:0;"> 
<table cellspacing="0" cellpadding="0" style="border-width:0;"> 
</div> 

CSS：

#ctl00_PlaceHolderLeftNavBar_ctl02_WebTreeView > table { display:none; } 

我不認爲你應該與CSS重寫你的內聯樣式任何問題，但如果這真的發生了，你可以考慮使用!important。雖然使用!important通常不是很好的做法，需要仔細考慮，但如果支持IE8使其成爲必需，我傾向於使用它。

<table cellspacing="0" cellpadding="0" style="border-width:0; display:block !important;">