CSS3-新属性-结构选择器_html/css_WEB-ITnose

　　上篇随笔中介绍了CSS3中，通过标签的属性寻找特定标签的方法。在该篇随笔中，我们使用结构选择器实现对特定标签的选择。按照 -child 和 -of-type，可区分为两类。-child表示寻找父标签的子节点，-of-type表示以标签类型寻找父标签中的子节点。

　　1、-child

　　　　R：nth-child(value){}

　　　　　　(1) value=1,2,3,...，表示：在R标签的父标签中，从上往下寻找第value个子节点，并且该标签类型必须为R才有效；

　　　　　　(2) value= 1n ,2n ,3n，表示：在R标签的父标签中，从上往下寻找第1n，2n，或3n个子节点，，并且该标签类型必须为R才有效，其中n取任意非负整数；

　　　　　　(3) value= odd，even，表示：在R标签的父标签中，从上往下寻找偶数或奇数子节点，并且该标签类型必须为R才有效；

　　　　R : nth-last-child(value){}

　　　　　　用法与R：nth-child(value)的（1）（2）（3）点形同，唯一的不同是在R标签的父标签中从下往上寻找子节点；

 

    2、-of-type

　　　　R：nth-of-type(value){}

　　　　　　(1) value=1,2,3,...，表示：在R标签的父标签中，从上往下寻找第value个类型为R的子节点；

　　　　　　(2) value= 1n ,2n ,3n，表示：在R标签的父标签中，从上往下寻找第1n，2n，或3n个类型为R的子节点，其中n取任意非负整数；

　　　　　　(3) value= odd，even，表示：在R标签的父标签中，从上往下寻找第偶数或奇数个类型为R的子节点；

　　　　R : nth-last-of-type(value){}

　　　　　　用法与R：nth-of-type(value)的（1）（2）（3）点形同，唯一的不同是在R标签的父标签中从下往上寻找类型为R的子节点；

 

　　3、不指定具体标签类型

   　　　body *：nth-child(value){}

　　　　body *：nth-last-child(value){}

　　　　body *：nth-of-type(value){}

　　　　body *：nth-last-of-type(value){}

 　　 表示在body为父元素，在body下寻找子节点

    4、不常用结构属性

　　　　R:first-child == R：nth-child(1)

　　　　R:last-child == R：nth-last-child(1)

　　　　R:first-of-type == R : nth-of-type(1)

　　　　R:last-of-type == R : nth-last-of-type(1)

　　对于选择器记住几种常用的即可，无需强行记忆，根据名称即可看出它们的含义，-child看中的是父级的子节点child，然后是同时满足前面的标签类型，而 -of-type看中的则是标签的类型type。