css - Bootstrap 表从某些行进行 strip 化

Question

我想让我的表格从第 7 行开始条纹化。

这不起作用:

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

Answer 1

你需要这个

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

Codepen Demo

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 */

<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>