|
|
下面是主要的代碼
js腳本：
復(fù)制代碼 代碼如下:
<script type="text/Javascript">
$(document).ready(
function () {
//每隔五行給li加一個(gè)樣式
$('.article_li li:nth-child(5n)').addClass('liborder');
$('.article_li li:last').addClass('liborder');
}
);
</script>
html代碼：
復(fù)制代碼 代碼如下:
<ul class="article_li">
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物業(yè)稅:長沙暫不試點(diǎn)物業(yè)稅:長沙暫不試點(diǎn)</a>
</li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物業(yè)稅:長沙暫不試點(diǎn)</a> </li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物業(yè)稅:長沙暫不試點(diǎn)</a> </li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物業(yè)稅:長沙暫不試點(diǎn)</a> </li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物業(yè)稅:長沙暫不試點(diǎn)</a> </li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物業(yè)稅:長沙暫不試點(diǎn)</a> </li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物業(yè)稅:長沙暫不試點(diǎn)</a> </li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物業(yè)稅:長沙暫不試點(diǎn)</a> </li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物業(yè)稅:長沙暫不試點(diǎn)</a> </li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物業(yè)稅:長沙暫不試點(diǎn)</a> </li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物業(yè)稅:長沙暫不試點(diǎn)</a> </li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物業(yè)稅:長沙暫不試點(diǎn)</a> </li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物業(yè)稅:長沙暫不試點(diǎn)</a> </li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物業(yè)稅:長沙暫不試點(diǎn)</a> </li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物業(yè)稅:長沙暫不試點(diǎn)</a> </li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物業(yè)稅:長沙暫不試點(diǎn)</a> </li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物業(yè)稅:長沙暫不試點(diǎn)</a> </li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物業(yè)稅:長沙暫不試點(diǎn)</a> </li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物業(yè)稅:長沙暫不試點(diǎn)</a> </li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物業(yè)稅:長沙暫不試點(diǎn)</a> </li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物業(yè)稅:長沙暫不試點(diǎn)</a> </li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物業(yè)稅:長沙暫不試點(diǎn)</a> </li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物業(yè)稅:長沙暫不試點(diǎn)</a> </li>
</ul>
具體的用法這里就不寫了，大家可以參考
http://www.jb51.NET/css/28294.html
http://www.jb51.NET/article/23617.htm
效果圖如下：
JavaScript技術(shù)：jquery nth-child()選擇器的簡單應(yīng)用，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時(shí)間聯(lián)系我們修改或刪除，多謝。
