Question

让我先展示示例代码

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>css test</title>
    <style type="text/css">
        #tbl tr:hover{
            background-color:#FFA270 !important;
        }
        #tbl td:nth-child(odd){
            background-color:#F0FFE2;
        }
        .cell{
            height:5ex;
            width:5em;
            background-color: #E2F1FF;
            text-align:center;
        }
    </style>
</head>
<body>
    <table id="tbl">
        <tr>
            <td class="cell">001</td>
            <td class="cell">002</td>
            <td class="cell">003</td>
            <td class="cell">004</td>
        </tr>
        <tr>
            <td class="cell">001</td>
            <td class="cell">002</td>
            <td class="cell">003</td>
            <td class="cell">004</td>
        </tr>
        <tr>
            <td class="cell">001</td>
            <td class="cell">002</td>
            <td class="cell">003</td>
            <td class="cell">004</td>
        </tr>
        <tr>
            <td class="cell">001</td>
            <td class="cell">002</td>
            <td class="cell">003</td>
            <td class="cell">004</td>
        </tr>
    </table>
</body>
</html>

我的期望：表格列用两种颜色着色，当鼠标悬停在一个单元格上时，整行用橙色突出显示。

代码实际执行了什么：表格列用两种颜色着色，悬停时没有任何反应。

我认为.cell和#tbl td比#tbl tr更具体，这就是为什么忽略悬停样式，但我不知道如何解决它，请帮忙。感谢。

Answer 1

你应该深入研究特异性： http://www.standardista.com/css3/css-specificity/

#id selector = 100“points”

.class和:pseudo-class选择器= 10“点”

在您的具体情况下，这将解决问题：

#tbl td:nth-child(odd){
    background-color:#F0FFE2;
}
#tbl tr:hover td.cell {
    background-color:#FFA270;
}

CSS规则中选择器的优先级

1 个答案: