2014-09-04 98 views
0

内特定的表我里面有我的SharePoint页面下面的HTML: -隐藏一个div

<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; 
} 

回答

5

使用:not,和:nth-child(n)选择:

#ctl00_PlaceHolderLeftNavBar_ctl02_WebTreeView > table:not(:nth-child(3)) { 
    display: none; 
} 
  • :not(selector)选择每个元素,除了所述一个内的选择器匹配parentesis。

  • nth-child选择是其父项的第n个子项的元素。

此外

避免使用!important,除非你真的需要它。它会弄乱你的代码。

1

您可以使用:not选择

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

:not比它提到的child-element选择其他。

!important覆盖用于该表的任何以前的属性。

0

在你需要支持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;">