CSS3 new selectors: pseudo-class selectors and attribute selectors

1. Structure (location) pseudo-class selector ( : )

1、:first-child

2、:last-child

3. :nth-child(n) or :nth-child(2n) or :nth-child(2n+1)

< body > 
    < ul > 
        < li > I am the first </ li > 
        < li > I am the second </ li > 
        < li > I am the third </ li > 
        < li > I am the fourth </ li > 
        < li > I am the fifth </ li > 
        < li > I am the sixth </ li > 
        < li > I am the seventh </ li >
        <li> I am the eighth </ li > 
        < li > I am the ninth </ li > 
        < li > I am the tenth </ li > 
    </ ul > 
</ body >

<style>
        ul li:first-child {
             /* select the first li */     
            background : rgb(228, 22, 22) ;
        } 
        ul li:last-child {
             /* Select the last li */ 
            background : rgb(109, 18, 212) ;
        } 
        ul li:nth-child(6) {
             /* Select the nth li */ 
            background : rgba(140, 214, 19) ;
        } 
        ul li:nth-child(2n) {
             /* Select even li (Note: n=0,1,2,3,4...) */ 
            font-size : 20px ;
        } 
        ul li:nth-child(2n+1) {
             /* Select odd li (Note: n=0,1,2,3,4...) */ 
            font-size : 12px ;
        }
    </style>

2. Attribute selector ([ ])

1. [Properties]

2. Can be mixed with regular expressions, such as $ and ^ and   * 

< body > 
    < ul > 
        < li class ="test" > I am first </ li > 
        < li class ="two123" > I am second </ li > 
        < li class ="twotabc" > I am The third </ li > 
        < li class ="abcfour" > I am the fourth </ li > 
        < li class ="ggg-four" > I am the fifth </li>
        <li class ="bug" > I am the sixth </ li > 
        < li class ="bug_ee" > I am the seventh </ li > 
        < li class ="hhbug" > I am the eighth </ li > 
        < li class ="bug345" > I am the ninth </ li > 
        < li class ="test" > I am the tenth </ li > 
    </ ul > 
</ body >

<style>
        ul li[class=test] {
             /* Select li with attribute class=test (first and tenth) */ 
            background : rgb(206, 25, 25) ;
        } 
        ul li[class$=four] {
             /* Select the li with the class name ending with four in the attribute (the fourth and fifth) */ 
            background : rgb(106, 9, 216) ;
        } 
        ul li[class^=two] {
             /* Select the li (the second and third) with the class name starting with two in the attribute */ 
            background : rgb(54, 201, 10) ;
        } 
        ul li[class*=bug] {
             /* Select all li (sixth, seventh, eighth, ninth) with bug class names in the attribute */ 
            font-size : 30px ;
        }
 </style>