ordine di sovrascrittura stile css?

Question

Beh io ho 2 css include

<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; 
} 

e poi abbiamo questa tabella

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

Perché layout.css sovrascrive ATJournal.css in questo caso?

Anche se cambio l'ordine del css comprende "layout.css" ancora sovrascrive ATJournal.css ....

Answer 1

Il selettore è più specifico.

Table.infoBox tr td table tr td 

è lo stile di celle all'interno di un tavolo che si trova all'interno di una tabella classificata con infobox.

table.ATJMainTable tr td 

è lo styling cellule TD all'interno di una tabella classificata con ATJMainTable

Si potrebbe utilizzare importante per ignorare la specificità, o si potrebbe fare qualcosa di simile:!

table.infoBox tr td table.ATJMainTable tr td 

per ignorare specificamente quel pezzo .

In alternativa, è possibile ridurre il selettore di Infobox in modo che sia meno specifico?

Answer 2

Si tratta di un selettore più specifico.

Vedere here.

Answer 3

È possibile specificare quale regola vince utilizzando !important.

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

Questo dice in sostanza il browser, che dovrebbe assicurarsi che questa regola è la regola più importante e tutti gli altri devono essere in cascata a favore di questa regola.

avviso: si consiglia di utilizzare questo con parsimonia perché causerà problemi se questo è difficile da rintracciare se lo si utilizza troppo.