：没有（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>