css3經常使用屬性之選擇器

以前記錄過一篇關於css3屬性在表現方面的例子，今天在來說講css3選擇器的使用方法。

第一個子節點;first-child

   /*first-child 所在元素爲父元素的第一個子節點*/
    ul li:first-child{
    	border:1px solid red;
    }

 

最後一個子節點：last-child

/*first-child 所在元素爲父元素的第一個子節點*/ 
ul li:nth-of-type(3){ border:1px solid blue; } 

 指定相應的子節點：nth-of-type(number)

/*nth-of-type(number) 指定相應的節點*/ 
ul li:nth-of-type{ border:1px solid green; } 

 奇偶節點選擇：nth-of-type(even/odd)

/*nth-of-type(even) 指定節點爲偶數的子節點*/ 
ul li:nth-of-type(even){  } 

/*nth-of-type(odd) 指定節點爲奇數的子節點*/ 
ul li:nth-of-type(odd){ border-radius:10px;  } 

 

 :not(first-child):篩選除此以外的元素

/*：not(:first-child) 選擇不是第一個子節點的元素*/ 
ul li:not(:first-child){ border:1px solid red;} 

demo:http://2.liteng.sinaapp.com/css3select.html

更多詳情參考：http://www.w3school.com.cn/cssref/css_selectors.asp