0

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>この場合の my はグローバル スタイルに従っています。

なんで？ありがとう。

4

1 に答える 1

0

スタイルに が指定background-colorされていません。#hor-my-bundles th, #hor-my-bundles tbody tr:hover tdスタイルに影響を与えるのはそれだけです。

この例のスタイルを正しく取りますhttp://jsfiddle.net/sN8ed/2/

于 2012-05-01T11:23:43.523 に答える