上篇随笔中介绍了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。