: nicht (CSS Selektor) mit Gewinde Selektoren Umgang

Question

Ich habe den folgenden Code:

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

ich folgende CSS bin mit auszuschließen Tabellen mit "main-l TBL" Klassen:

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

Was mir aufgefallen ist, ist die nicht: Selektor schließt alle Tabellen mit Klassen. Views-Tabelle aus, unabhängig von der Verwendung von '.main-l .views-table'.

Wie würde ich garantieren, dass nur solche mit Thread-Klassen wie '.main-l .views-table' ausgeschlossen sind, aber nicht solche mit nur .views-table class?

Answer 1

Da .tbl ist ein Kind von .main-l funktioniert es nicht so. Der Selektor :not() funktioniert nur für das Element selbst, nicht für übergeordnete Elemente.

Sie müssten dies tun:

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

Beachten Sie, dass div in css sollte vermieden werden, setzen Sie besser eine Klasse wie .tbl-container oder ähnliches.

Answer 2

Da .main-1 das übergeordnete Element ist, müssen Sie not() für dieses Element verwenden, um die Tabelle auszuschließen, die es enthält.

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

Sie beziehen sich bereits auf die table aber Ihre Wähler zu einer Klasse des äußeren div zu beziehen versucht, durch main-l verwenden.

Sie eine der folgenden Optionen verwenden können, um zu erreichen, was Sie nach:

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

oder wenn Sie spezifischere

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>