隔行變色是網頁設計中常見到的，以前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年陜西省高考播音類統考一分段統計</a></li>
    <li><a href="#">2015年陜西省高考編導類統考一分段統計</a></li>
    <li><a href="#">陜西省2015年高考志愿填報時間及方式</a></li>
    <li><a href="#">西安智博教育2015屆統考和高考成績統計表</a></li>
    <li><a href="#">高考志愿填報指導：專業無冷熱 學校無高低</a></li>
    <li><a href="#">教育評論：高考加分 關鍵在公平</a></li>
    <li><a href="#">2017年高考將執行新政：英語退出 語數分量加重</a></li>
    <li><a href="#">2015年高考政策“瘦身” 河南減幅最大</a></li>
</ul>

對于絕大多數的瀏覽器都是支持的，但是卻無法在IE8下正常顯示，于是就有了Query隔行變色的方法：

js代碼如下：
<script type="text/javascript">
    $(document).ready(function () {
        $("ul li:even").css("background","#5f5d5e");
        $("ul li:odd").css("background","#484443");
    });
</script>

這樣就支持所有的瀏覽器了。