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

StackOverflow https://stackoverflow.com/questions/3791594

  •  05-10-2019
  •  | 
  •  

Question

Je suis en train de passer outre le style d'un descendant (et non l'enfant direct) d'un élément en utilisant le CSS.

Dis, 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 au « 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 est à la recherche pour un <tr> enfant direct qui n'est pas le cas ici. Comme <tr> est enveloppé dans <tbody>

Comment puis-je résoudre ce problème?

Était-ce utile?

La solution 3

Le problème n'est pas la priorité. Je me suis dit que ce devrait être

vertical-align: middle au lieu de vertical-align: center

Cela fonctionne.

Autres conseils

Les styles en ligne ont une priorité supérieure à celles définies dans les balises ou une feuille de style comprennent. Supprimez l'attribut valign="top" (il est dépréciée dans les versions les plus récentes de la norme HTML de toute façon), ou, si vous ne pouvez pas modifier le balisage, marquer la règle CSS comme !important. Le sélecteur lui-même est bon (vous pouvez tester en ajoutant d'autres règles).

Votre CSS est très bien. Entre les descendants blancs de sélecteurs, > serait nécessaire pour les enfants directs.

Votre problème est que l'attribut en ligne a la priorité sur le style dans la feuille de style. Vous pouvez essayer d'utiliser !important, mais je ne sais pas honnêtement comment fonctionne priorité avec des attributs HTML obsolètes. Je ne les utilise jamais.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top