Question

我有以下示例表：

<table id="inputTable">
  <thead>
    <tr>
      <th>Id</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Mike</td>
    </tr>
    <tr>
      <td>2</td>
      <td>eric</td>
    </tr>
    <tr>
      <td>3</td>
      <td>jonas</td>
    </tr>
  </tbody>
</table>

我想知道如何才能选择表格中的每个奇数行和第二个单元格？

我想出了这个：

#inputTable tbody tr:nth-child(odd) td:nth-child(2){
    background-color: red;
}

但它不起作用。有人有任何解决方案？

Answer 1

您的CSS无效，因为它定位#mainTable，但您的HTML显示为id="inputTable"。

Answer 2

＆＃13;

tr:nth-child(odd) td:nth-child(2){
    background-color: red;
}

＆＃13;

<table id="inputTable">
  <thead>
    <tr>
      <th>Id</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Mike</td>
    </tr>
    <tr>
      <td>2</td>
      <td>eric</td>
    </tr>
    <tr>
      <td>3</td>
      <td>jonas</td>
    </tr>
  </tbody>
</table>

＆＃13;

Answer 3

使用css尝试奇怪的偶数选择。

tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}

使用css在表中选择奇数行和特定单元格的有效方法

3 个答案: