如何使用 CSS 为元素的后代（不是直接子元素）设置样式？
我正在尝试使用 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 正在查找直接子 ，但这里的情况并非如此。由于 包含在 内，
我该如何解决这个问题？
I am trying to override the style of a descendant (not the direct child) of an element using CSS.
Say, I am working on:
<table id="z_d__h3-real" class="z-hbox">
<tbody>
<tr valign="top">
-----
</tr>
</tbody>
</table>
I want to override the style to set the valign of the tr element to "center".
I tried doing:
table.z-hbox tr {
vertical-align:center;
}
This doesn't work though. I assume table.z-hbox tr is looking up for a direct child <tr> which is not the case here. As <tr> is wrapped inside <tbody>
How do I fix this?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
内联样式的优先级高于标记或样式表中定义的样式。删除
valign="top"属性（无论如何，它在较新版本的 HTML 标准中已被弃用），或者，如果您无法更改标记，请将 CSS 规则标记为!important.选择器本身很好（您可以通过添加其他规则来测试它）。Inline styles have higher priority than those defined in tags or a stylesheet include. Either remove the
valign="top"attribute (it's deprecated in newer versions of the HTML standard anyway), or, if you cannot change the markup, mark the CSS rule as!important. The selector itself is good (you can test this by adding other rules).你的CSS没问题。选择器之间的空格选择后代，直接子代需要
>。您的问题是内联属性优先于样式表中的样式。您可以尝试使用
!important，但我真的不知道优先级如何处理已弃用的 HTML 属性。我从不使用它们。Your CSS is fine. Whitespace between selectors selects descendants,
>would be needed for direct children.Your problem is that the inline attribute takes precedence over the style in the stylesheet. You could try using
!important, but I don't honestly know how precedence works with deprecated HTML attributes. I never use them.问题不在于优先级。我发现它应该是
vertical-align: middle 而不是 Vertical-align: center
这有效。
The problem is not with the precedence. I figured out that it should be
vertical-align: middle instead of vertical-align: center
This works.