：沒有（CSS選擇器）處理螺紋選擇

Question

我有以下代碼：

<div class="main-l"> 
    <table class="tbl"> 
    .. 
    </table> 
</div> 

我使用下面的CSS來排除與「主-1 TBL」類別表：

table:not(.main-l .views-table) { 
    .. 
} 

我注意到的是：無論使用'.main-l .views-table'，選擇器都排除所有帶有.views-table類的表。

我該如何保證只有那些帶有線程類（如'.main-l .views-table'）的用戶才被排除在外，而不是那些只有.views-table類的用戶？

Answer 1

因爲.tbl是.main-l的孩子，所以不能這樣工作。 :not()選擇器僅適用於元素本身，不適用於父元素。

你將不得不這樣做：在CSS使用div應避免

div:not(.main-l) .tbl { 
    ... 
} 

注意，最好設定一個類像.tbl-container或相似。

Answer 2

由於.main-1是父元素，因此您必須在該元素上使用not()來排除對其進行插入的表。

table { 
 
    width: 50px; 
 
    height: 50px; 
 
    border: 1px solid black; 
 
} 
 

 
*:not(.main-l) > table { 
 
    background: red; 
 
}

<div class="main-l"> 
 
    <table class="views-table"></table> 
 
</div> 
 
<table class="views-table"></table>

Answer 3

您已經參照table但你的選擇是嘗試使用main-l指一類外div的。

您可以使用下列之一來實現你所追求的：

table:not(.views-table) { 
    background: teal; 
} 

，或者如果你想更具體的

div.main-l table:not(.views-table) { 
    background: teal; 
} 

.main-l table { 
 
    height: 100px; 
 
    width: 100px; 
 
    border: 1px solid black; 
 
} 
 

 
table:not(.views-table) { 
 
    background: teal; 
 
} 
 

 
div.main-l table:not(.views-table) { 
 
    background: teal; 
 
}

<div class="main-l"> 
 
    <table class="tbl"> 
 
    <tbody> 
 
     <tr> 
 
     <td></td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div> 
 
<div class="main-l"> 
 
    <table class="views-table"> 
 
    <tbody> 
 
     <tr> 
 
     <td></td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div> 
 
<div class="main-l"> 
 
    <table class="tbl"> 
 
    <tbody> 
 
     <tr> 
 
     <td></td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>