2016-07-07 3 views
1

definiert Ich habe eine einfache Tabelle und die zugehörigen CSS-Regeln für die Tabelle wie folgt:
HTML:
nicht vorher CSS-Regel außer Kraft setzen

<table id="depts"> 
      <tr> 
       <th>Department</th> 
       <th>Posts</th> 
      </tr> 

      <tr> 
       <td colspan="2" class="none"> No Posts in this department</td> 
      </tr> 
</table> 

CSS:

#depts { 
     width: 500px; 
     font-family: 'Open Sans', sans-serif; 
     border-spacing: 0; 
     border: 1px solid black; 
    } 
    #depts td{ 
     border-top: 2px solid #607D8B;  
     text-align: left; 
     font-family: 'Patua One', cursive; 
     padding: 10px; 
    } 
    .none { 
     text-align: center; 
     padding-top: 40px; 
    } 

Wie es zu sehen ist Ich habe eine neue Klasse für eine td mit dem Namen none hinzugefügt. Die Text-Align-Eigenschaft wurde von left zu center geändert. Aber es wird nicht wiedergegeben, wenn ich die Seite ausführen Ausgabe ist wie folgt: css class not working

Warum wird die neue Regel nicht ignoriert. Hat colspan irgendetwas damit zu tun?

+1

Try hinzufügen ein Leerzeichen hinzufügen td Element so Ihr th und td Element übereinstimmen – Mfusiki

+0

versuchen Sie mit! wichtig – scsiva1991

Antwort

1

nur #depts.none Erklärung vor Ihrer hinzufügen.

.none Klasse haben eine niedrigere Priorität als #depts td.

Sie können here oder here einen Blick auf Prioritätsordnung nehmen

#depts { 
 
     width: 500px; 
 
     font-family: 'Open Sans', sans-serif; 
 
     border-spacing: 0; 
 
     border: 1px solid black; 
 
    } 
 
    #depts td{ 
 
     border-top: 2px solid #607D8B;  
 
     text-align: left; 
 
     font-family: 'Patua One', cursive; 
 
     padding: 10px; 
 
    } 
 
#depts .none { 
 
     text-align: center; 
 
     padding-top: 40px; 
 
    }
<table id="depts"> 
 
      <tr> 
 
       <th>Department</th> 
 
       <th>Posts</th> 
 
      </tr> 
 

 
      <tr> 
 
       <td colspan="2" class="none"> No Posts in this department</td> 
 
      </tr> 
 
</table>

1

Fügen Sie den "wichtigen" Flag an die keiner Klasse wie folgt:

.none { 
     text-align: center!important; 
     padding-top: 40px; 
    } 
+0

verwenden '! wichtig', wenn Sie nicht auf andere Weise lösen können –

+0

Verwenden' 'wichtig' zu überschreiben ein Inline-Stil, den Sie nicht ändern können. Ansonsten verstehe CSS-Spezifität und vermeide "! Wichtig". –

1

ID hat mehr Priorität als Klasse, so dass Sie

#depts .none { 
     text-align: center; 
     padding-top: 40px; 
    } 

oder

.none { 
     text-align: center!important; 
     padding-top: 40px; 
    } 

CSS Spezifität gefunden werden kann here

Verwandte Themen