css - 对 td 所做的更改不会反映在其子节点上

Answer 1

You can just explicitly select descendants of a hovered element, like this:

.textTable td,
.textTable td a {
    color:rgb(121,0,0);
}

.textTable td:hover,
.textTable td:hover a {
    background-color:rgb(121,0,0);
        color:white;
}

You don't need javascript. If you like the way your nested rules in your second example look, though, you could look into using SASS or Less, which allow you to do that (more or less)

Answer 2

为 td a:hover 添加 CSS 样式还不够吗

.textTable td a
{
    color:rgb(121,0,0);
}

.textTable td:hover
{   
  background-color:rgb(121,0,0);
  color:white;
}

.textTable td a:hover {
  color:white;

}

Answer 3

您没有将课程添加到表格中。预览：http: //jsfiddle.net/msbodetti/YvbVn/

这个

<table>
  <tr>
    <td><a href="">Choultry</a></td>
    <td><a href="" >Vegetable verndors</td>
  </tr>
  <tr>
    <td><a href="" >Decorators</td>
    <td><a href="" >Handicrafts</td>
  </tr>
</table>

应该

<table class="textTable">
  <tr>
    <td><a href="">Choultry</a></td>
    <td><a href="" >Vegetable verndors</td>
  </tr>
  <tr>
    <td><a href="" >Decorators</td>
    <td><a href="" >Handicrafts</td>
  </tr>
</table>