CSS imbriqué ne fonctionne pas comme je le veux!

Question

permet de bien dire que j'ai cette

<table class="infoBox"> 
    <tr> 
     <td> 
      test 
     </td> 
     <td> 
      <table> 
       <tr> 
        <td> 
         this should not be bold! 
        </td> 
       </tr> 
      </table> 
     </td> 
    </tr> 
</table> 

Et puis nous avons eu quelques css pour cette

Table.infoBox tr td { font-weight: bold; }

maintenant mon problème est que la table imbriquée semble obtenir le css aussi quand je veux que la table externe pour obtenir ce css comment puis-je définir d'une manière afin que les tables imbriquées ne sont pas affectés par le css ?

Answer 1

Bien que vous puissiez le faire avec un enfant immédiat, cela n'est pas supporté par tous les navigateurs. Essayez:

table.infoBox tr td { font-weight: bold; } 

table.infoBox table tr td { font-weight: normal; } 

Tout ce que le sélecteur table.infoBox tr td dit est:

Appliquer ce style à une balise <td> qui est un enfant de toute étiquette <tr>, qui est un enfant d'une table avec une classe de Infobox. Par conséquent, vous devez obtenir plus de détails en dessous de ce bloc de style afin de déclarer ce que vous voulez faire pour les tables dans les tables de la classe infoBox.

Answer 2

Soit utiliser le sélecteur d'enfant:

table.infoBox > tbody > tr > td { font-weight: bold; } 

(non pris en charge dans IE6)

Note: le mystérieux élément tbody. Ceci est inséré par le navigateur si vous ne le mettez pas dedans. C'est parce que les tables ont trois sections: thead, tbody and tfoot. En l'absence d'un de ceux-là, des rangées sont ajoutées à l'élément tbody.

ou une combinaison:

table.infoBox tr td { font-weight: bold; } 
table.infoBox tr td td { font-weight: normal; } 

Il existe de nombreuses variantes possibles de celui-ci.

Answer 3

Table.infoBox table td {font-weight: normal; }

Answer 4

Il peut également suffire à utiliser:

table.infoBox { font-weight: bold; } 
table.infoBox table { font-weight: normal; } 

ou

table.infoBox tr { font-weight: bold; } 
table.infoBox table tr { font-weight: normal; } 

Bien que tous css dépend d'autres règles font-weight tout au long de votre css, il est à portée de main de noter que declerations css sont basés sur la décendensie, pas la relation parent-enfant direct. Donc table{} aura juste le même effet sur le contenu que td{} tant que vous n'avez rien de plus fort ou de plus proche du contenu défini.