css style overwrite order?

Question

Nun, ich habe 2 css enthält

<link href="Styles/layout.css" rel="stylesheet" type="text/css" /> 
<link href="Styles/ATJournal.css" rel="stylesheet" type="text/css" /> 

layout.css

Table.infoBox tr td table tr td 
{ 
    padding: 0px; 
    border: 0px; 
} 

ATJournal.css

table.ATJMainTable tr td 
{ 
    border: 1px solid black; 
    padding: 3px; 
} 

und wir haben dann dieser Tabelle

<Table class="infoBox"> 
    <tr> 
     <td> 
     <table class="ATJMainTable"> 
      <tr> 
       <td> 
        some text! 
       </td> 
      </tr> 
     </table> 
    </tr> 
</table> 

Warum layout.css überschreibt ATJournal.css in diesem Fall?

Auch wenn ich die Reihenfolge der css „layout.css“ noch enthält überschreibt ATJournal.css ....

Answer 1

Der Selektor ist spezifischer.

Table.infoBox tr td table tr td 

formatiert Td-Zellen in einer Tabelle, die in einer Tabelle mit Infobox klassifiziert ist.

table.ATJMainTable tr td 

stylt td Zellen in einer Tabelle mit ATJMainTable eingestuft

Sie nutzen könnten wichtig, die Spezifität außer Kraft zu setzen, oder man könnte so etwas wie tun:

table.infoBox tr td table.ATJMainTable tr td 

, um speziell das Stück außer Kraft setzen .

Alternativ können Sie den Infobox-Selektor reduzieren, um weniger spezifisch zu sein?

Answer 2

es ist ein spezifischeres Selektor.

Siehe here.

Answer 3

Sie können tatsächlich angeben, welche Regel gewinnt, indem Sie !important verwenden.

table.ATJMainTable tr td 
{ 
    border: 1px solid black !important; 
    padding: 3px !important; 
} 

Dies sagt dem Browser, dass es diese Regel stellen Sie sicher, sollte die wichtigste Regel ist, und alle anderen sollten für diese Regel kaskadiert werden.

Warnung: Sie wollen dies sparsam verwenden, weil es Probleme verursachen wird, wenn das schwer zu finden ist, wenn Sie es zu viel verwenden.