Überspringe den Stil des ersten untergeordneten Selektors für ein bestimmtes Element

Nehmen wir an, wir haben eine generische CSS-Klasse für die Tabelle, die an allen Stellen in unserer Anwendung verwendet werden kann. Nehmen wir an, dass dieser Stil auch den ersten Kind-Selektor hat.Überspringe den Stil des ersten untergeordneten Selektors für ein bestimmtes Element

tr td:first-child { ... }

Ich möchte diese Klasse für eine bestimmte Tabelle verwenden, aber überspringen alle First-Child-Stile.

Da dies eine generische Stilklasse für Tabellen ist, kann ich sie nicht entfernen und auch nicht mit Inline-Styling umgehen.

Dank

Quelle

2016-05-20 kurt_vonnegut

Ich bin ein wenig unklar, was du meinst. Sagen Sie zum Beispiel 'tr td: first-child {...}' hat einen gelben Hintergrund, möchten Sie [1] eine Klasse auf eine bestimmte Tabelle anwenden, wo sie keinen gelben Hintergrund hat, dh .. überschreiben Sie die Standard? Oder [2] haben eine Klasse, die allen Zellen einen roten Hintergrund gibt, aber die erste Zelle ist immer noch gelb? – Rhumborl

Szenario 1 ist das, was ich eigentlich gefragt habe. Trotzdem möchte ich diese Klasse für diese spezifische Tabelle verwenden, aber verwende einfach keinen gelben Hintergrund, wie es auf dem ersten Kind-Selektor ist. Die anderen Tabellen, die diese Klasse verwenden, sollten als normales Verhalten gelb hinterlegt sein. –

Sie für diese bestimmte table spezifische mehr sein könnte, vorausgesetzt, es ist eine Klasse hat oder eine ID können Sie:

tr td:first-child { 
 
    color: red; 
 
} 
 
.test tr td:first-child { 
 
    color: green; 
 
}

<table> 
 
    <tr> 
 
    <td>First td</td> 
 
    <td>Second td</td> 
 
    </tr> 
 
</table> 
 

 
<table class="test"> 
 
    <tr> 
 
    <td>First td</td> 
 
    <td>Second td</td> 
 
    </tr> 
 
</table>

Excuse die begrenzte Markup, aber Sie bekommen den Punkt. Da die Klasse .test tr td:first-child {} spezifischer als der generische Stil ist, wird sie überschrieben, jedoch nur für den table mit der Klasse test.

Weitere Informationen über Spezifität: https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/

Quelle

2016-05-20 10:06:12

ich sehe, was Sie mit dem Erstellen von mehr Klasse für diese Tabelle bedeuten, aber was ist, wenn ich nicht alle Stile erneut schreiben und nur die erste-Kind-Selektor entfernen möchte? –

@ kurt_vonnegut Es gibt keinen einfachen Weg dies zu tun, da die Stile unter dem generischen 'td: first-child' alle ersten' td's aufnehmen, wenn sie nicht weiter unten in der Zeile überschrieben werden - was ich in meinem Beispiel demonstriert habe Antworten... –

Überspringe den Stil des ersten untergeordneten Selektors für ein bestimmtes Element

Antwort

Verwandte Themen