CSS überwiegende Bootstrap-Tabelle

Question

Here're meiner Wähler:

table.table.table-striped.vitalStatisticsTable th, 
table.table.table-striped.vitalStatisticsTable td { 
    line-height: 1; 
    padding: .4rem; 
    background-color: red; 
} 

Hier ist mein Markup:

<table class="table table-striped vitalStatisticsTable"> 
    <tr> 
    <th scope="row">Education</th> 
    <td>Post Graduate</td> 
    </tr> 
    <tr> 
    <th scope="row">Vices</th> 
    <td>Drinks socially</td> 
    </tr> 
    <tr> 
    <th scope="row">Race</th> 
    <td>White</td> 
    </tr> 
    <tr> 
    <th scope="row">Pets</th> 
    <td>George the turtle</td> 
    </tr> 
</table> 

Meine Regeln nicht angewandt werden, aber ich bin nicht wirklich sicher, was ich falsch mache . Ich dachte, ich müsste die Spezifität erhöhen, und wie ich es verstehe, bin ich spezifischer als Bootstrap, aber vielleicht verpasse ich etwas. Kann jemand einem css n00b helfen?

Answer 1

können Sie verwenden diese: table.vitalStatisticsTable th, table.vitalStatisticsTable td Dies funktioniert. Alle Klassen müssen nicht im Selektor erwähnt werden.

Answer 2

Well. Eigentlich funktioniert das. Ich hatte ein zusätzliches "}" in meiner CSS-Datei. Ich bin beschämt und erleichtert zugleich.