css背景改变为tr

Question

我想使用此css为行提供良好的背景效果

tr:hover td{background-color:#ddd; }

想象一下桌子里面的一张桌子， 自然所有td的内部，也受到这个css的影响。我该如何预防？

<table
    <tr
        <td -->color change is good
    <tr
        <td
            <table
                <tr
                    <td --> color change is bad

我尝试使用

form>table>tr:hover td still same
form>table>tr:hover>td not working at all

感谢您的帮助

Answer 1

使用此选项仅在悬停时设置外部td的样式。

form > table > tbody > tr:hover > td {
    background-color: #ddd;
}

注意tbody选择器。请参阅this answer了解其原因。

Answer 2

使用第二个选择器：

tr:hover table td { background-color: black; } /*change to default*/