首页标题数字排序列表前三变色

<style>

.left01 .pinglun ul{ margin-top:10px;}
    .left01 .pinglun li{ height:25px; line-height:25px; margin-left:20px; width:200px; float:left;}
.left01 .pinglun li a{ font-size:14px;  margin-left:10px;}
.left01 .pinglun li span{width:18px; height:18px;line-height:18px; font-size:12px;background:#09F;float:left;text-align:center;color:#FFF; margin-top:3px;}
.left01 .pinglun li .col{background:#F60;}
    </style>
    <div class="content">
<div class="left1">
        <div class="left01">
            <h1><p>最新评论<p></h1>
                    <div class="pinglun">
                   <ul>
                    <asp:Repeater ID="rptpinglun" runat="server">
                     <ItemTemplate> 
                     <span style="display:none"><%=num++ %></span>
                         <li><span class="<%=num>3?"":"col" %>"><%=num%></span><a href="/gaojian/gaojian_view.aspx?ArticleId=<%#Eval("ArticleId") %>"><%#xjz.Common.MFunction.Text_Substring( Eval("ArticlTitle").ToString(),20,"" )%>！</a></li>
                    </ItemTemplate>
                    </asp:Repeater>
                   </ul>
                   </div>
            </div>
            <div class="right01">
            </div>
        </div>
    <div class="right1">
        r
        </div>
</div>