Original: pure CSS interlaced color change
<Head> <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /> <title>CSS3 Alternating Color---www.jbxue.com</title> <styletype= "Text/css">#list1 Li:nth-of-type (odd){background:#00ccff;}Odd line #list1 li:nth-of-type (even){background:#ffcc00;}even line #list2 li:nth-child (4n+1){background:#00ccff;}start with the first line every 4 (including fourth) Use this style #list00000 Li:nth-child (4n+2){background:#090;}from the second line, count every 4 (including fourth) using the sub-style #list00000 li:nth-child (4n+3){background:#009;}from the third line, count every 4 (including fourth) using the secondary style #list00000 Li:nth-child (4n+4){background:#990;}from line fourth, count every 4 (including fourth) to use a secondary style</style> </Head> <Body> <Div> <ulID= "List1"> <Li>1111111 the front-end is a multiplayer blog for the Scripting Academy</Li> <Li>222222222222CSS3 Interlaced color change test</Li> <Li>333333333 provides examples of jquery tutorials to learn code, HTML5 tutorial instances, and CSS/CSS3 Tutorial example learning code.</Li> <Li>44444444 the soul of the blog on the front-end: Learning, discovering, sharing, communicating</Li> <Li>55555555555555</Li> <Li>66666666666666666</Li> </ul> <HR/> <ulID= "List2"> <Li>1111111 the front-end is a multiplayer blog for the Scripting Academy</Li> <Li>222222222222CSS3 Interlaced color change test</Li> <Li>333333333 provides examples of jquery tutorials to learn code, HTML5 tutorial instances, and CSS/CSS3 Tutorial example learning code.</Li> <Li>44444444 the soul of the blog on the front-end: Learning, discovering, sharing, communicating</Li> <Li>55555555555555</Li> <Li>66666666666666666</Li> </ul> </Div> </Body>
Pure CSS Interlaced color change