使用 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 偽類」 就可以在文章的列表的前面添加一些我們需要的內容了，達到這種效果。