css - 为什么我的桌子风格被全局风格所掩盖？

Question

在 main.html 中，我有这个

<style type="text/css">
#hor-my-bundles
{
    font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
    font-size: 12px;
    background: #fff;
    margin: 45px;
    width: 480px;
    border-collapse: collapse;
    text-align: left;
}
#hor-my-bundles th
{
    font-size: 14px;
    font-weight: bold;
    color: #039;
    padding: 10px 8px;
    border-bottom: 2px solid #6678b1;
}
#hor-my-bundles td
{
    border-bottom: 1px solid #ccc;
    color: #669;
    padding: 6px 8px;
}
#hor-my-bundles tbody tr:hover td
{
    color: #009;
}
</style>
    <table id="hor-my-bundles">
        <thead>
            <tr>
                <th scope="col"> Name </th>
                 ...and a few more.....
            </tr>
        </thead>
        <tbody>
            <tr>
               ...body stuff
            </tr>
        </tbody>
    </table>

我启用了全局 css，它具有以下内容：

table{}
th{ background-color: #BBB; padding-left: 10px; padding-right: 10px;}
td, th{ }
td{}
tr:hover{ background-color: #dfd; }

但我想既然我已经用不同的cs id指定了我的表，<td>等等也应该遵循这些。相反，我<th>在这种情况下遵循全局风格。

为什么？谢谢。

Answer 1

您尚未background-color为#hor-my-bundles th, #hor-my-bundles tbody tr:hover td样式指定 a。这就是我能看到的所有会影响风格的东西。

它正确采用了此示例中的样式http://jsfiddle.net/sN8ed/2/