¿estilo de sobrescribir orden?

Question

Bueno tengo 2 CSS incluye

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

y entonces tenemos esta tabla

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

¿Por qué layout.css sobrescribe ATJournal.css en este caso?

Incluso si cambio el orden de la CSS incluye "layout.css" todavía sobrescribe ATJournal.css ....

Answer 1

El selector es más específico.

Table.infoBox tr td table tr td 

es de un estilo células td dentro de una tabla que está dentro de una tabla clasificada con infobox.

table.ATJMainTable tr td 

es de un estilo células td dentro de una tabla clasificada con ATJMainTable

Usted podría utilizar importante para anular la especificidad, o usted podría hacer algo como:

table.infoBox tr td table.ATJMainTable tr td 

para anular específicamente esa pieza .

Como alternativa, ¿puede reducir el selector de la caja de información para que sea menos específico?

Answer 2

Es un selector más específico.

Ver here.

Answer 3

Puede especificar qué regla gana usando !important.

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

Esto básicamente le dice al navegador, que debe asegurarse de que esta regla es la regla más importante y todos los demás debe ser en cascada a favor de esta regla.

advertencia: querrá usar esto con moderación porque puede causar problemas si es difícil rastrearlo si lo usa demasiado.