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#}"以本站为例，<li data-number="{#$idx+1#}">[<em><a href="{#$new.cate_link#}" title="{#$new.cate_name#}">{#$new.cate_name#}</a></em>]<a href="{#$new.web_link#}" title="{#$new.web_name#}">{#$new.web_name#}</a><span>{#$new.web_ctime#}</span></li>

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