从某些行条带化的Bootstrap

Question

我希望我的表从第7行开始。

这不起作用：

.table-striped > tbody > tr:nth-child(7n)

Answer 1

你需要使用n + 7来做到这一点。

.table-striped > tbody > tr:nth-child(n+7) td

Answer 2

你需要这个

.table-striped tbody tr:nth-of-type(2n+7) td {
  background: /* your color here */;
}

Codepen Demo

＆＃13;

＆＃13;

td {
  border:1px solid grey;
  padding:1em;
}

.table-striped tbody tr:nth-of-type(odd) {
  background:none !important;
}

.table-striped tbody tr:nth-of-type(2n+7) {
  background:lightgrey !important;
}

/* note !important is only used here for demo purposes. */

/* This seesm to be because the CSS is applied in the wrong order in Snippets */

/* See the Codepen Demo for use without !important */

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<table class="table table-striped">
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;