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

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

您可以尝试这样的事情：

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;