隐藏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,除非你真的需要它.它会弄乱你的代码.