Question

    <table>
     <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>
      <tr>
          <td>6</td>
     </tr>
      <tr>
          <td>7</td>
     </tr>
     <tr>
          <td>8</td>
     </tr>
    </table>

我想用不同的颜色为第4,5和6号着色如何从第n个孩子中选择它。难以理解

table tr:first-child{background-color: #F57676;}
table tr:nth-child(even){background-color: #F5B3B3;}
table tr:nth-child(odd){background-color: #F2DCDC;}
table tr:last-child{ background-color: #F57676;}

由于

Answer 1

你可以使用例如。在这里，我们选择表格的第4和第5个孩子。

table tr:nth-child(4),
table tr:nth-child(5) {
    background-color: red;
}

Answer 2

jsFiddle Example

使用nth-child(n+x)语法指定偏移量，这将选择第四行及以上

tr:nth-child(n+4) {
  background-color: #FAA;
}

Answer 3

尝试：

$("table").find("tr:eq(3),tr:eq(4)").addClass("cls");

DEMO.

Answer 4

作为一般规则，我倾向于不使用第N个孩子，因为它的向后兼容性相当有限。我建议应用html / css类名称，例如'class =“4th”'，因为它可以在更多旧版浏览器上运行。

如果您计划以任何方式在jquery中实现它，请使用此引用 site

CSS jQuery选择器第n个孩子

4 个答案: