CSSを使用して、要素の子孫（直接の子供ではない）をスタイリングする方法は？

Question

私は、CSSを使用して要素の子孫（直接の子供ではない）のスタイルをオーバーライドしようとしています。

と言って、私は取り組んでいます：

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

TR要素のバラインを「中心」に設定するために、スタイルをオーバーライドしたいと思います。

やってみました：

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

しかし、これはうまくいきません。私はtable.z-hoxTRが直接の子供を探していると仮定します <tr> ここではそうではありません。として <tr> 中に包まれています <tbody>

これを修正するにはどうすればよいですか？

Answer 1

問題は優先されません。私はそれがそうあるべきだと理解しました

垂直アライイン：中央 垂直アライインの代わりに：中央

これは機能します。

Answer 2

インラインスタイルは、タグまたはスタイルシートに定義されているものよりも優先度が高くなります。どちらかを削除します valign="top" 属性（とにかくHTML標準の新しいバージョンで非推奨）、またはマークアップを変更できない場合は、CSSルールをとしてマークします !important. 。セレクター自体は優れています（他のルールを追加することでこれをテストできます）。

Answer 3

あなたのCSSは大丈夫です。セレクター間の白人は子孫を選択し、 > 直接の子供には必要になります。

あなたの問題は、インライン属性がスタイルシートのスタイルよりも優先されることです。使用してみてください !important, 、しかし、私は正直に優先順位が廃止されたHTML属性でどのように機能するかを正直に知りません。私はそれらを決して使用しません。