CSS3 结构伪类选择器

不怕小猫爱吃糖，就怕小猫没文化，要做一只有文化的前端喵！

css3中的结构伪类选择器：通过文档树结构的相互关系来匹配特定的元素，可以减少HTML文档对ID或类名的定义。

选择器	功能描述
E:first-child	父元素的第一个子元素
E:last-child	父元素的最后一个子元素
E:root	匹配元素E所在文档的根元素
E  F:nth-child(n)	选择父元素E的第n个子元素F
E  F:nth-last-child(n)	选择元素E的到时第n个子元素
E:nth-of-type(n)	父元素内具有指定类型的第n个元素
E:nth-last-of-type	父元素内具有指定类型的倒数第n个E元素
E:first-of-type	父元素内具有指定类型的第一个元素，等同于E:nth-of-type(1)
E:last-of-type	父元素内具有指定类型的最后一个元素，等同于E:nth-last-of-type(1)
E:only-child	父元素中只包含一个子元素
E:only-of-type	父元素只包含一个同类型的子元素，且该子元素匹配E元素
E:empty	没有子元素的元素，而且该元素也不包含任何文本节点

　　　　ps：小猫真的有乖乖并且非常认真的看书，然后辛苦的把表格整理了下来，自己奖励一颗糖吃，(*^__^*) 嘻嘻……

几乎大部分的主流浏览器都完美的支持了css3的结构伪类选择器，但是IE9以下的版本浏览器中无法正常运行。好吧开始我们的选择器的学习之旅吧！O(∩_∩)O哈哈~

 

小猫写了个示例：用的ul li ，每个数字代表一个li。

ul li:first-child{

　　background:red;

};

ul li:last-child{

　　background:orange;

}

分别选择的是子元素中的第一个和最后一个，这两个很简单，小猫就不做太多的笔记了.

ul li:nth-child(1) 就是选择ul中li的第一个，和上面 :first-child的效果是一样的。在这个选择器里还有一个参数n，在这里参数n就相当于一个具体的数值。n可以为一个数值也可以为一个表达式，也可以用odd(选择奇数元素)或even(选择偶数元素)代替，n是从1开始的。

 

ul li:nth-child(odd){

　　background:green;

}

接下来是小猫要着重介绍的那就是:nth-of-type 。:nth-of-type计算的是父元素中某种指定类型的子元素。

如图： 如果这是我们写代码

ul li:nth-child(4){

　　background:orange;　　

}

页面将没有任何变化，这是为什么呢，因为在当前的ul中第四个并不是li，而是ul，而nth-child(4)是不会把div排除的，所以不会找到第四个，页面上也不会有变化了。所以"nth-of-type”就闪亮登场了，如果把代码改成

ul li:nth-of-type(4){

　　background:orange;

}

那就会发现第四个li的背景变味了橘色，是不是很神奇！有了这个选择器当我们在想编辑不规则内容（比如说通过后台富文本添加的内容）的时候是不是会很容易呢！与”nth-of-type“想对应的就是”nth-last-of-type“,这个同样也是选择父元素中指定的某种子元素类型，只不过是从最后一个开始选择的。

“first-of-type”和“last-of-type”就类型与上面“first-child”和“last-child”。

only-child ：表示一个元素是它父元素的唯一子元素。

剩余的小猫就不一一整理了，小猫会把例子和用法都写在实例里面，有兴趣的小伙伴可以复制网址去看效果（http://runjs.cn/detail/hlxyntql），非常赞哦(*^__^*) 嘻嘻……第一次写博客有点小紧张，希望会越来越好，也希望能帮助到大家。