html - 用 css 悬停覆盖 html 内联背景色

Question

我有一个问题，我需要改变一个表格的背景颜色，我只能改变css。我想将鼠标悬停在 table tr 上，但某些 table td 具有内联 bg-color，我无法将鼠标悬停在它上面。 !important 不起作用。这是我的问题。

CSS

table{
border: 1px solid black;
}

table tr:hover{
background-color: pink !important;
}

HTML
<table>
    <tr>
        <td style="background-color:green;">test1</td>
        <td>test2</td>   
    </tr>
    <tr>
        <td>test3</td>
        <td>test4</td>
    </tr>
</table>

Answer 1

为 td 添加规则解决了你的问题

table tr:hover td

table{
border: 1px solid black;
}

table tr:hover,
table tr:hover td {
background-color: pink !important;
}

<table>
    <tr>
        <td style="background-color:green;">test1</td>
        <td>test2</td>   
    </tr>
    <tr>
        <td>test3</td>
        <td>test4</td>
    </tr>
</table>