css計數器的使用counter-increment

 

 

 

 

 

 

section {
    display: flex;
    width:100%;
    background: blue;
    counter-increment: row;
    line-height: 50px;
}
section:before{
    content:"第"counter(row)"行";
    color:#fff;
}
section div{
      counter-increment: ccc;
      background: red;
      color:#fff;
      height:50px;
      line-height: 50px;
      width:50px;
      text-align: center;
  }

section div:before{
    content:counter(ccc);
}

<section>    <div></div>    <div></div>    <div></div></section><section>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div></section><section>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div></section><section>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div></section><section>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div></section><section>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div></section><section>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div></section>