如何使用 CSS 为元素的后代（不是直接子代）设置样式？答案

【问题标题】：How to use CSS to style a descendant (not a direct child) of an element?如何使用 CSS 为元素的后代（不是直接子代）设置样式？
【发布时间】：2017-06-11 16:19:42
【问题描述】：

我正在尝试使用 CSS 覆盖元素的后代（不是直接子代）的样式。

说，我正在努力：

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

我想重写样式，将 tr 元素的 valign 设置为“center”。

我试过了：

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

但这不起作用。我假设 table.z-hbox tr 正在寻找一个直接的孩子<tr>，这不是这里的情况。因为<tr> 被包裹在<tbody> 中

我该如何解决这个问题？

【问题讨论】：

标签： css html-table hbox

【解决方案1】：

内联样式的优先级高于在标签或样式表中定义的那些。要么删除valign="top" 属性（无论如何它在较新版本的HTML 标准中已被弃用），或者，如果您无法更改标记，请将CSS 规则标记为!important。选择器本身很好（您可以通过添加其他规则来测试）。

【讨论】：

【解决方案2】：

你的 CSS 很好。选择器之间的空格选择后代，直接子代需要>。

您的问题是 inline 属性优先于样式表中的样式。您可以尝试使用!important，但我真的不知道优先级如何与已弃用的 HTML 属性一起使用。我从不使用它们。

【讨论】：

【解决方案3】：

问题不在于优先级。我想应该是这样的

vertical-align: middle 而不是 vertical-align: center

这行得通。

【讨论】：