在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)选择每个元素，除了一个与父代内的选择器匹配的元素。
• 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选择器将不受支持(尽管IE8支持:first-child )。如果是这样的话，我建议在第三个表中添加一些内联样式。

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