css style de réécriture?

Question

Eh bien, je l'ai 2 comprend css

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

puis nous avons cette table

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

Pourquoi est-ce layout.css remplace ATJournal.css dans ce cas?

Même si je change l'ordre du css comprend « layout.css » encore ATJournal.css .... remplace

Answer 1

Le sélecteur est plus spécifique.

Table.infoBox tr td table tr td 

est coiffants cellules td dans un tableau qui est à l'intérieur d'une table classée avec infobox.

table.ATJMainTable tr td 

est le style des cellules td dans une table classée avec ATJMainTable

Vous pouvez utiliser important de passer outre la spécificité, ou vous pourriez faire quelque chose comme:

table.infoBox tr td table.ATJMainTable tr td 

à outrepasser spécifiquement cette pièce .

Alternativement, pouvez-vous réduire le sélecteur d'infobox à être moins spécifique?

Answer 2

il est un sélecteur plus spécifique.

Voir here.

Answer 3

Vous pouvez réellement spécifier quelle règle gagne en utilisant !important.

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

Cela indique essentiellement le navigateur, qu'il devrait assurer que cette règle est la règle la plus importante et tous les autres doivent être propagées en faveur de cette règle.

avertissement: vous voudrez l'utiliser avec parcimonie car cela posera des problèmes si cela est difficile à localiser si vous l'utilisez trop.