CSS nicht auswählen funktioniert nicht mit Substring-Selektor

Question

Ich habe mehrere <th> Tags in einer Tabelle, und ich möchte ihre Farbe ändern, es sei denn, die erste. Ich versuchte css :not Selektor, aber es funktioniert nicht, wenn Teilzeichenfolge Selektor innerhalb setzen. Es funktioniert nur, wenn ich das id des Elements direkt setze. Allerdings möchte ich dies dynamischer machen (z. B. nicht die id jedes Mal ändern). Wie soll ich das machen?

//This is not working 
th[id*="header"]:not(th[id*="header0"]) 

//This is working 
th[id*="header"]:not(#header0) 

/* 
 
th[id*="header"]:not(th[id*="header0"]) { 
 
    color: red; 
 
} 
 
*/ 
 

 
th[id*="header"]:not(#header0) { 
 
    color: red; 
 
}

<table> 
 
    <tr> 
 
    <th id="header0">Header0</th> 
 
    <th id="header1">Header2</th> 
 
    <th id="header2">Header3</th> 
 
    <th id="header3">Header4</th> 
 
    <th id="header4">Header5</th> 
 
    <th id="header5">Header6</th> 
 
    </tr> 
 
</table>

Answer 1

ich verdächtigen verwenden können, sind die Auswahl dass Sie nach etwas wie diesem suchen

th[id^="header"]:not([id$="0"]) { 
 
    color: red; 
 
}

<table> 
 
    <tr> 
 
    <th id="header0">Header0</th> 
 
    <th id="header1">Header2</th> 
 
    <th id="header2">Header3</th> 
 
    <th id="header3">Header4</th> 
 
    <th id="header4">Header5</th> 
 
    <th id="header5">Header6</th> 
 
    </tr> 
 
</table>

Wo th[id^="header"]:not([id$="0"]) liest wie:

Jeden te Element mit der ID von "Header" begonnen, aber nicht mit "0" endet.

Answer 2

Statt verschiedene Verfahren zu versuchen, warum nicht einfache Methode wie folgt verwenden?

th{ 
    color: red; 
} 
th:first-child{ 
    color: black; 
} 

Welche ist besser verträglich als wie dies mit:

th:not(:first-child) { 
    color: red; 
} 

---

Zur Beantwortung Ihrer Frage:

//This is not working 
th[id*="header"]:not(th[id*="header0"]) 

Da th[id*="header"] wählt alle th-Elemente mit der ID mit Kopf Zeichenfolge überall und die Verwendung des Nicht-Selektors, den Sie mit :not(th[id*="header0"]) meinen, wird th auswählen das Kindelement von th[id*="header"], das Sie nicht haben, d. h. th von th. Und selbst der Selektor :not funktioniert nicht für komplexe Selektoren. Sehen Sie reference, um den einfachen Selektor zu sehen.

//This is working 
th[id*="header"]:not(#header0) 

Das funktioniert, weil es sagt, dass Sie nicht #header0 te Element des gleichen Kopf th[id*="header"]

Answer 3

Sie das erste Kind Selektor mit nicht

th:not(:first-child) { 
    color: red; 
}