隔行變色是網(wǎng)頁設(shè)計中常見到的，以前HTML4.0時代用的都是table形式的隔行變色。而XHTML以后前端都使用DIV+CSS的布局方式。
比如想做成下圖這種隔行變色的效果，最方便的辦法就是使用CSS3:nth-of-type() 選擇器。
CSS如下寫：
<style>
ul li:nth-of-type(odd){background:#5f5d5e;}
ul li:nth-of-type(even){background:#484443;}
</style>
<ul>
<li><a href="#">2015年陜西省高考播音類統(tǒng)考一分段統(tǒng)計</a></li>
<li><a href="#">2015年陜西省高考編導(dǎo)類統(tǒng)考一分段統(tǒng)計</a></li>
<li><a href="#">陜西省2015年高考志愿填報時間及方式</a></li>
<li><a href="#">西安智博教育2015屆統(tǒng)考和高考成績統(tǒng)計表</a></li>
<li><a href="#">高考志愿填報指導(dǎo)：專業(yè)無冷熱 學(xué)校無高低</a></li>
<li><a href="#">教育評論：高考加分 關(guān)鍵在公平</a></li>
<li><a href="#">2017年高考將執(zhí)行新政：英語退出 語數(shù)分量加重</a></li>
<li><a href="#">2015年高考政策“瘦身” 河南減幅最大</a></li>
</ul>
對于絕大多數(shù)的瀏覽器都是支持的，但是卻無法在IE8下正常顯示，于是就有了Query隔行變色的方法：
js代碼如下：
<script type="text/javascript">
$(document).ready(function () {
$("ul li:even").css("background","#5f5d5e");
$("ul li:odd").css("background","#484443");
});
</script>
這樣就支持所有的瀏覽器了。