首页 > web前端 > html教程 > CSS3-新属性-结构选择器_html/css_WEB-ITnose

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

WBOY
发布: 2016-06-24 11:21:09
原创
1268 人浏览过

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

 

 

  

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板