html - 如何为表格中特定数量的行着色？

Question

<style>     
    #font{
        font-size: 20px;
        color:#0000cd;
    }
    tr:nth-child(n+7) {
        background-color: #d3d3d3;
    }                  
    table {
       border-spacing: 0;
    }
</style>

如何只为特定数量的行着色？ 这里只有我的显示器的前 7 行是白色的，其余的是灰色的。我想要 7 条白色线、7 条灰色线、7 条白色线、7 条灰色线等等...

Answer 1

你可以尝试这样的事情:

.table>span {
  height: 20px;
  width: 20px;
  display: inline-block;
  background: red;
}

.table>span:nth-child(14n + 1),
.table>span:nth-child(14n + 2),
.table>span:nth-child(14n + 3),
.table>span:nth-child(14n + 4),
.table>span:nth-child(14n + 5),
.table>span:nth-child(14n + 6),
.table>span:nth-child(14n + 7) {
  background: blue;
}

<div class="table">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>