jQuery實現為LI列表前3行設置樣式的方法【2種方法】

2019-11-20 09:05:11

字體：大中小

來源：轉載

供稿：網友

本文實例講述了jQuery實現為LI列表前3行設置樣式的方法。分享給大家供大家參考，具體如下：

在設計網頁模板的時候，為了突出信息的重要性以及美觀度，我們會設置一些樣式使LI文章列表的前3行加上不同的樣式，例如給LI文章列表的前3行文字顏色設置紅色，再例如圖片列表的時候設置列表第一張圖片、第二張圖片等的寬和高，都可以用藍葉分享的這兩種方法為LI列表設置樣式；對于懂PHP語言的設計者來說，很容易就可以實現的效果，對于不懂PHP語言的可以使用這兩種方法也很輕松的實現自己想要的各種效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><style type="text/css">#newlog li:nth-child(1) a{color:red;}</style><!--說明：上面的CSS樣式設置樣式名為#newlog下面的li列表中第一行的a標簽文字顏色為紅色；如果要設置第二行或者第二行，修改里面的1為2或者3就行了，以此類推。IE6-IE8 不兼容--></head><body><ul id="newlog">  <li><a href="###">閱誰問君誦，水落清香浮</a></li>  <li><a href="###">閱誰問君誦，水落清香浮</a></li>  <li><a href="###">閱誰問君誦，水落清香浮</a></li>  <li><a href="###">閱誰問君誦，水落清香浮</a></li>  <li><a href="###">閱誰問君誦，水落清香浮</a></li>  <li><a href="###">閱誰問君誦，水落清香浮</a></li></ul><script type="text/javascript" src="jquery-1.10.1.min.js"></script><script type="text/javascript">$(document).ready(function(){ $('#newlog li:eq(3) a').css('color','red');});//說明：這是JQ的方式給樣式名為#newlog下面的li列表中第一行的a標簽設置字體顏色為紅色；JQ的方式中0就是第一行，如果第二行則是1，以此類推。</script></body></html>

效果圖：