纯CSS文章列表隔行换色,隔行换样式

纯CSS文章列表隔行换色

先看看效果:

隔四行换色

其他样式可自行修改。比如隔行加粗,字体变大等。

CSS样式:

#list1 li:nth-of-type(odd){ background:#00ccff;}奇数行 
#list1 li:nth-of-type(even){ background:#ffcc00;}偶数行 
#list2 li:nth-child(4n+1){ background:#00ccff;}从第一行开始算起 每隔4个(包含第四个)使用此样式 
#list00000 li:nth-child(4n+2){background:#090;}从第二行开始算起 每隔4个(包含第四个)使用次样式 
#list00000 li:nth-child(4n+3){background:#009;}从第三行开始算起 每隔4个(包含第四个)使用次样式 
#list00000 li:nth-child(4n+4){background:#990;}从第四行开始算起 每隔4个(包含第四个)使用次样式

HTML代码:

<ul id="list1"> 
<li>读书之乐乐无穷,拨琴一弄来熏风。</li> 
<li>书多笔渐重,睡少枕长新。——姚合《别贾岛》</li> 
<li>坏书是带有知识性的毒药,它会毒杀精神。——伏尔泰</li> 
<li>胸中书传有余香。——宋·辛弃疾</li> 
<li>静坐自无妄为,读书即是立德。</li> 
<li>要知天下事,须读古人书。</li> 
<li>凡事豫则立,不豫则废。</li> 
<li>学而不思则罔,思而不学则殆。</li> 
<li>学而时习之,不亦说乎?</li> 
<li>君子坦荡荡,小人常戚戚。</li> 
<li>发愤忘食,乐以忘忧,不知老之将至云尔。</li> 
<li>巧言乱德,小不忍则乱大谋。</li>
</ul> 
<hr /> 
<ul id="list2"> 
<li>退笔如山起足珍,读书万卷始通神</li> 
<li>读书如果不明白道理,等于白读。</li> 
<li>从某种意义上说没有一本书是坏的正如没有一个女人是丑的。</li> 
<li>道不同,不相为谋。</li> 
<li>不患寡而患不均,不患贫而患不安。</li> 
<li>不义而富且贵,于我如浮云。</li>
<li>不在其位,不谋其政。</li> 
<li>名不正,则言不顺;言不顺,则事不成。</li> 
<li>其身正,不令而行;其身不正,虽令不从。</li> 
<li>一言而兴邦,一言而丧邦。</li> 
<li>君子耻其言而过其行。</li> 
<li>不患人之不己知,患不知人也。</li>
</ul> 

根据自己需要选择相关样式即可。

THE END