更改行上的背景颜色,但不更改行标题

Question

我正在尝试使用CSS更改表格行的背景颜色,但我不想更改表格标题的背景.但是,默认情况下,TH包含在TR中,因此TR规则被推送到我的TH.

如果它有帮助,这里有一个jsfiddle测试:http: //jsfiddle.net/jomanlk/Bcayc/

Answer 1

您可以添加<thead>和<tbody>区分数据行中的标题行.这样您就可以只定位所需的目标:

table tbody td:hover{
    background: #f00;
}

table tbody tr:hover{
    background: #00f;
}?

DEMO

以及以下标记:

<table>
    <thead>
        <tr>
            <th>Col 1</th>
            <th>Col 2</th>
            <th>Col 3</th>
            <th>Col 4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Col 1</td>
            <td>Col 2</td>
            <td>Col 3</td>
            <td>Col 4</td>
        </tr>
    </tbody>
</table>?