css3经常使用属性之选择器

以前记录过一篇关于css3属性在表现方面的例子,今天在来说讲css3选择器的使用方法。css

第一个子节点;first-childhtml

   /*first-child 所在元素为父元素的第一个子节点*/
    ul li:first-child{
    	border:1px solid red;
    }

 

最后一个子节点:last-childcss3

/*first-child 所在元素为父元素的第一个子节点*/ 
ul li:nth-of-type(3){ border:1px solid blue; } 

 指定相应的子节点:nth-of-type(number)app

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

 奇偶节点选择:nth-of-type(even/odd)ssr

/*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):筛选除此以外的元素htm

/*:not(:first-child) 选择不是第一个子节点的元素*/ 
ul li:not(:first-child){ border:1px solid red;} 

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

更多详情参考:http://www.w3school.com.cn/cssref/css_selectors.aspget

相关文章
相关标签/搜索