Comment utiliser CSS pour styler un descendant (pas un enfant direct) d'un élément?

Question

J'essaie de remplacer le style d'un descendant (pas l'enfant direct) d'un élément en utilisant CSS.

Dites, je travaille sur:

<table id="z_d__h3-real" class="z-hbox"> 
<tbody> 
    <tr valign="top"> 
    ----- 
    </tr> 
    </tbody> 
</table> 

Je veux remplacer le style pour régler la valign de l'élément tr à « centre ».

J'ai essayé de faire:

table.z-hbox tr { 
    vertical-align:center; 
} 

Cela ne fonctionne pas bien. Je suppose que table.z-hbox tr recherche un enfant direct <tr> ce qui n'est pas le cas ici. Comme <tr> est enveloppé à l'intérieur <tbody>

Comment résoudre ce problème?

Answer 1

Le problème n'est pas avec la précédence. Je me suis dit que ce devrait être

vertical-align: milieu au lieu de vertical-align: Centre

Cela fonctionne.

Answer 2

Votre CSS va bien. Les espaces entre les sélecteurs sélectionnent les descendants, > serait nécessaire pour les enfants directs.

Votre problème est que l'attribut inline a la priorité sur le style de la feuille de style. Vous pouvez essayer d'utiliser !important, mais je ne sais pas vraiment comment la précédence fonctionne avec les attributs HTML obsolètes. Je ne les utilise jamais.

Answer 3

Les styles en ligne ont une priorité plus élevée que ceux définis dans les balises ou une feuille de style. Supprimez l'attribut valign="top" (il est de toute façon obsolète dans les versions plus récentes du standard HTML) ou, si vous ne pouvez pas modifier le balisage, marquez la règle CSS en tant que !important. Le sélecteur lui-même est bon (vous pouvez le tester en ajoutant d'autres règles).