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选择器将不受支持（尽管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;">

隐藏div中的特定表

3 个答案: