css3隔行變換色實現示例


<style>
#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個(包含第四個)使用次樣式 */
</style>
 1 <div> 
 2 <ul id="list1"> 
 3 <li>1111111</li> 
 4 <li>222222222222</li> 
 5 <li>333333333</li> 
 6 <li>44444444</li> 
 7 <li>55555555555555</li> 
 8 <li>66666666666666666</li> 
 9 </ul> 
10 <hr /> 
11 <ul id="list2"> 
12 <li>1111111</li> 
13 <li>222222222222CSS3</li> 
14 <li>333333333</li> 
15 <li>44444444</li> 
16 <li>55555555555555</li> 
17 <li>66666666666666666</li> 
18 </ul> 
19 </div> 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM