如何使用：not（）选择器？

Question

我有一个HTML模板：

<div class="table-vertical"> 
    <table class="table"> 
    <thead> 
     <tr> 
     <th></th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
     <td> 
      <div class="picker"> 
      <table> 
       <thead> 
       <tr> 
        <th></th> 
       </tr> 
       </thead> 
       <tbody> 
       <tr> 
        <td></td> 
       </tr> 
       </tbody> 
      </table> 
      </div> 
     </td> 
     </tr> 
    </tbody> 
    </table> 
</div> 

我使用样式此表：

.table-vertical, 
.table-vertical tbody, 
.table-vertical thead, 
.table-vertical td, 
.table-vertical tr { 
    display: block; 
} 

但我需要忽略td元素和.picker类中的第二个表，所以我尝试：

.table-vertical, 
.table-vertical :not(.picker) tbody, 
.table-vertical thead, 
.table-vertical :not(.picker) td, 
.table-vertical :not(.picker) tr { 
     display: block; 
} 

但这不起作用。那么如何忽略td和div中的第二个表呢？

Answer 1

您的:not()选择器实际上工作。问题在于您的选择器的结构可满足多种场景。

下面是一个例子：

.table-vertical :not(.picker) tbody 

tbody是.picker后代，因此被排除。

但是，tbody也是.table-vertical的后裔，所以它被包括在内。

这就是您的:not()选择器不适用的原因。它们被适用的选择器覆盖。

试试这个办法：

• 有你的HTML结构中的两个表元素。
• 一个是.table-vertical
• 另外一个孩子的.picker
• 所以一个孩子，目标只为排斥的.picker孩子。

.table-vertical, 
 
.table-vertical :not(.picker) > table { 
 
    display: block; 
 
    background: aquamarine !important; 
 
} 
 

 
.table-vertical { 
 
    padding: 5px; 
 
} 
 

 
.table { 
 
    border: 2px dashed red; 
 
    width: 300px; 
 
    height: 200px; 
 
} 
 

 
.picker { 
 
    width: 200px; 
 
    height: 100px; 
 
} 
 

 
.picker, 
 
.picker * { 
 
    background-color: orange; 
 
}

<div class="table-vertical"> 
 
    <table class="table"> 
 
    <thead> 
 
     <tr> 
 
     <th>primary table</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td> 
 
      <div class="picker"> 
 
      <table> 
 
       <thead> 
 
       <tr> 
 
        <th>picker table</th> 
 
       </tr> 
 
       </thead> 
 
       <tbody> 
 
       <tr> 
 
        <td></td> 
 
       </tr> 
 
       </tbody> 
 
      </table> 
 
      </div> 
 
     </td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>

对于另一采取此方案，看到这个帖子：https://stackoverflow.com/a/42353253/3597276