css изменение фона для tr

Question

Я хочу дать хороший фоновый эффект для строк, используя эту CSS

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

Представьте себе таблицу внутри таблицы, естественно, все тд внутри, также производимые этим 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 s при наведении.

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

Обратите внимание на селектор tbody.См. этот ответ , почему это необходимо.

Answer 2

Используйте второй селектор:

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