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。这就是我能看到的会影响风格的一切。

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

为什么我的餐桌风格会被全球风格所掩盖？

1 个答案: