如何使用：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