35分类目录css实现标题1-10排行序号

在相关css文件加入

/* 在模板样式表中添加 */

.artlist_b {

  list-style: none;

  padding-left: 0;

  counter-reset: rank;

}





.artlist_b li {

  position: relative;

  padding-left: 20px;

  counter-increment: rank;

}





.artlist_b li::before {

  content: counter(rank);

  position: absolute;

  left: 5px;

  top: 50%;

  transform: translateY(-50%);

  font: 700 18px/1 'Roboto Condensed', Arial, sans-serif;

  color: #666; /* 默认数字颜色 */

}





/* 前三位特殊样式 */

.artlist_b li:nth-child(1)::before { 

  color: #ff4757; /* 冠军红 */

  font-size: 22px;

}

.artlist_b li:nth-child(2)::before { 

  color: #ffa502; /* 亚军橙 */

  font-size: 20px;

}

.artlist_b li:nth-child(3)::before { 

  color: #2ed573; /* 季军绿 */

  font-size: 18px;

}





/* 4-10位数字淡化处理 */

.artlist_b li:nth-child(n+4)::before {

  color: #a4b0be;

  font-weight: 500;

}

接着在需要显示的标题前加入data-number="{#$idx+1#}"以本站为例，

如有不懂的请在本站意见反馈留言，站长将在第一时间回复您