html - 在 div 中隐藏特定表格

Question

我的共享点页面中有以下 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，除非你真的需要它。它会弄乱你的代码。