使用 WordPress 程序做网站时，我们通常通过动态代码去调用某个版块的文章列表。这种文章列表一般是使用无序列表标签<ul> 标签来排列的。但为了一些效果的需要，我们需要在调用的文章列表前面显示一个编号。
在做网站时如何去显示上面的自动递增的编号效果呢，这种效果我们可以用 css3 的 「nth-child 伪类」 以及 「:before 和:after 伪类」 来实现这样的效果。
首先在要显示文章列表的 DIV 中放入调用某个栏目下的文章列表的 WordPress 代码：
<ul >
<?php if (have_posts()) : ?>
<?php query_posts('cat=1' . $mcatID. '&caller_get_posts=1&showposts=6'); ?>
<?php while (have_posts()) : the_post(); ?>
<a href="<?php%20the_permalink()%20?>"> <?php echo mb_strimwidth(get_the_title(), 0, 32, ''); ?></a>
<?php endwhile;?>
<?php endif; wp_reset_query(); ?></ul>
以上的代码就可以调用 ID=1 的分类下的文章，并且调用文章的数量为 6 篇，这些参数可以根据自己的需要进行设置。
第二步就是放一段控制文章列表编号的的 CSS，将以下的 CSS 代码放到网站的模板的 style.css 文件的最底部。
.xwz_bh li{list-style:none;height:30px;line-height:30px;font-size:14px; margin-bottom:5px;}
.xwz_bh li:before{ color:#fff; margin-right:5px; display:inline-block; width:30px; height:30px;border-radius:3px; text-align:center;}
.xwz_bh li:nth-child(1):before{content:'1';background:red;}
.xwz_bh li:nth-child(2):before{content:'2';background:red;}
.xwz_bh li:nth-child(3):before{content:'3';background:red;}
.xwz_bh li:nth-child(4):before{content:'4';background:green;}
.xwz_bh li:nth-child(5):before{content:'5';background:green;}
.xwz_bh li:nth-child(6):before{content:'6';background:green;}
.xwz_bh li:nth-child(7):before{content:'7';background:green;}
.xwz_bh li:nth-child(8):before{content:'8';background:green;}
.xwz_bh li:nth-child(9):before{content:'9';background:green;}
.xwz_bh li:nth-child(10):before{content:'10';background:green;}
这样通过 「:before 和:after 伪类」 就可以在文章的列表的前面添加一些我们需要的内容了，达到这种效果。