排除第一个。在我的选择器内.cbs-List tr：nth-​​child（odd）

Question

我有以下css： -

.cbs-List tr:nth-child(odd) {
    background-color: red;
}

主要为所有奇数表行设置背景颜色。但我如何修改我的选择器以排除第一个<TR>？

以下是我正在使用的表格的屏幕截图： -

Answer 1

您可以将:not选择器与:first-child结合使用：

.cbs-List tr:nth-child(odd):not(:first-child) {
    background-color: red;
}

.cbs-List tr:nth-child(odd):not(:first-child) {
  background-color: red;
}

<table class=cbs-List>
  <tbody>
    <tr>
      <td>
        1
      </td>
    </tr>
    <tr>
      <td>
        2
      </td>
    </tr>
    <tr>
      <td>
        3
      </td>
    </tr>
    <tr>
      <td>
        4
      </td>
    </tr>
    <tr>
      <td>
        5
      </td>
    </tr>
  </tbody>
</table>

  

...但你的代码主要是将红色应用到我表格的第4行。表头标题行和正文内的2行没有任何背景颜色。

我认为这是您的标记必须在tr中定义一个thead以及在tr中定义的其余tbody元素的位置。如果是这种情况，为了满足您的需求，您只需使用：

.cbs-List tbody tr:nth-child(even) { ... }

.cbs-List tbody tr:nth-child(even) {
  background-color: red;
}

<table class=cbs-List>
  <thead>
    <tr>
      <th>
        Header
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        1
      </td>
    </tr>
    <tr>
      <td>
        2
      </td>
    </tr>
    <tr>
      <td>
        3
      </td>
    </tr>
    <tr>
      <td>
        4
      </td>
    </tr>
    <tr>
      <td>
        5
      </td>
    </tr>
  </tbody>
</table>

Answer 2

使用2n+3：

.cbs-List tr:nth-child(2n+3) {
    background-color: red;
}

等于“从第3个孩子开始的每第2个孩子”

在看到后来发布的HTML屏幕截图后添加：

选择器选择并计算父级的直接子元素。它不区分不同的标签。 只需在选择器中写入（2n + x），将“x”替换为您想要受影响的tbody元素中第一行的编号。 （在您的情况下2n+2或简称even，如果我理解您的意图正确的话）