純CSS文章列表隔行換色，隔行換樣式

純CSS文章列表隔行換色

先看看效果：

隔四行換色

其他樣式可自行修改。比如隔行加粗，字體變大等。

CSS樣式：

#list1 li:nth-of-type(odd){ background:#00ccff;}奇數(shù)行 
#list1 li:nth-of-type(even){ background:#ffcc00;}偶數(shù)行 
#list2 li:nth-child(4n+1){ background:#00ccff;}從第一行開始算起 每隔4個(gè)（包含第四個(gè)）使用此樣式 
#list00000 li:nth-child(4n+2){background:#090;}從第二行開始算起 每隔4個(gè)（包含第四個(gè)）使用次樣式 
#list00000 li:nth-child(4n+3){background:#009;}從第三行開始算起 每隔4個(gè)（包含第四個(gè)）使用次樣式 
#list00000 li:nth-child(4n+4){background:#990;}從第四行開始算起 每隔4個(gè)（包含第四個(gè)）使用次樣式

HTML代碼：

<ul id="list1"> 
<li>讀書之樂樂無窮，撥琴一弄來熏風(fēng)。</li> 
<li>書多筆漸重，睡少枕長新?！稀秳e賈島》</li> 
<li>壞書是帶有知識(shí)性的毒藥，它會(huì)毒殺精神?！鼱柼?lt;/li> 
<li>胸中書傳有余香?！巍ば翖壖?lt;/li> 
<li>靜坐自無妄為，讀書即是立德。</li> 
<li>要知天下事，須讀古人書。</li> 
<li>凡事豫則立，不豫則廢。</li> 
<li>學(xué)而不思則罔，思而不學(xué)則殆。</li> 
<li>學(xué)而時(shí)習(xí)之，不亦說乎？</li> 
<li>君子坦蕩蕩，小人常戚戚。</li> 
<li>發(fā)憤忘食，樂以忘憂，不知老之將至云爾。</li> 
<li>巧言亂德，小不忍則亂大謀。</li>
</ul> 
<hr /> 
<ul id="list2"> 
<li>退筆如山起足珍，讀書萬卷始通神</li> 
<li>讀書如果不明白道理，等于白讀。</li> 
<li>從某種意義上說沒有一本書是壞的正如沒有一個(gè)女人是丑的。</li> 
<li>道不同，不相為謀。</li> 
<li>不患寡而患不均，不患貧而患不安。</li> 
<li>不義而富且貴，于我如浮云。</li>
<li>不在其位，不謀其政。</li> 
<li>名不正，則言不順；言不順，則事不成。</li> 
<li>其身正，不令而行；其身不正，雖令不從。</li> 
<li>一言而興邦，一言而喪邦。</li> 
<li>君子恥其言而過其行。</li> 
<li>不患人之不己知，患不知人也。</li>
</ul> 

根據(jù)自己需要選擇相關(guān)樣式即可。