html - 使用 CSS 悬停偶数元素的子元素

Question

我需要设置悬停在作为“tr”子元素的“a”元素上，该元素由第 nth-child(even) 选择器选取。

基本上我有一个包含多行的普通表格，在每个表格单元格内都有一个“a”链接，我想在鼠标悬停时突出显示该链接，但仅在偶数行中。

我的 CSS 代码:

.table-striped tr:nth-child(even) td a:hover {
    color: #3c3c3c;
}

而且它不起作用。

我该如何解决这个问题？

.table-striped tr:nth-child(even) td a:hover {
  color: Red;
}

<table class="table-striped">
  <tr>
    <td>Some text here</td>
    <td><a href="#">Click here</a>
    </td>
  </tr>
  <tr>
    <td>Some text here</td>
    <td><a href="#">Click here</a>
    </td>
  </tr>
  <tr>
    <td>Some text here</td>
    <td><a href="#">Click here</a>
    </td>
  </tr>
  <tr>
    <td>Some text here</td>
    <td><a href="#">Click here</a>
    </td>
  </tr>
  <tr>
    <td>Some text here</td>
    <td><a href="#">Click here</a>
    </td>
  </tr>
  <tr>
    <td>Some text here</td>
    <td><a href="#">Click here</a>
    </td>
  </tr>
</table>

Answer 1

您使用的 css 运行良好:

.table-striped tr:nth-child(even) td a:hover {
    color: #3c3c3c;
    color:red;/*for dislay i have use this red color;*/
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-striped">
    <tr>
        <td><a href="#">link 1</a></td>
        <td><a href="#">link 2</a></td>
        <td><a href="#">link 3</a></td>
    </tr>
    <tr>
        <td><a href="#">link 1</a></td>
        <td><a href="#">link 2</a></td>
        <td><a href="#">link 3</a></td>
    </tr>
    <tr>
        <td><a href="#">link 1</a></td>
        <td><a href="#">link 2</a></td>
        <td><a href="#">link 3</a></td>
    </tr>
    <tr>
        <td><a href="#">link 1</a></td>
        <td><a href="#">link 2</a></td>
        <td><a href="#">link 3</a></td>
    </tr>
    <tr>
        <td><a href="#">link 1</a></td>
        <td><a href="#">link 2</a></td>
        <td><a href="#">link 3</a></td>
    </tr>
</table>