以前记录过一篇关于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