伪类选择器:nth-child的使用

体会到了伪类选择器：nth-child的强大之处，所以打算系统的记录一下这个css3选择器的相关用法及场景使用的兼容性等。顺便了解学习一下不太常用的其他伪类选择器。

:nth-child选择器的使用方法

：nth-child的基本用法

<ul>
    <li>第1排</li>
    <li>第2排</li>
    <li>第3排</li>
    <li>第4排</li>
    <li>第5排</li>
    <li>第6排</li>
    <li>第7排</li>
</ul>

选择第3个li标签

1	ul li:nth-child(3)

选择前3个li标签

1	ul li:nth-child(-n+3)

选择从第3个li标签开始到最后

1	ul li:nth-child(n+3)

选择第3个到第7个

1	ul li:nth-child(n+3):nth-child(-n+7)

选择奇数行

1
2
3

ul li:nth-child(2n+1)
//或者
ul li:nth-child(odd)

选择偶数行

1
2
3

ul li:nth-child(2n)
//或者
ul li:nth-child(even)

选择3的倍数行

1	ul li:nth-child(3n)

类似的可以进行各种组合，比如选择第3个到第9个之间的奇数行(不包括3\9)

1	ul li:nth-child(2n+1):nth-child(n+4):nth-child(-n+8)

和nth-child类似用法的选择器nth-last-child(n)，他是从一个序列倒数开始计数的

在不知道一共有多少个的情况下,选择最后两行

1	ul li:nth-last-child(-n+2)

反选：not（）选择器

选择除了最后一个的其他所有行

1	ul li:not(:nth-child-child(1))

：nth-child与nth-of-type的区别

关于nth-child的应用还有一个重要的知识点是与nth-of-type的区别。
同样一个ul列表里如果我们在里面加入了非li标签的其他元素

<ul>
    <span>我不是第一排</span>
    <li>第1排</li>
    <li>第2排</li>
    <li>第3排</li>
    <li>第4排</li>
    <li>第5排</li>
    <li>第6排</li>
    <li>第7排</li>
</ul>

这个时候如果我们写

1	ul li:nth-child(2)

选择出来的并不是第2个li标签而是第1个li标签，这里我们就可以用
:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素

1	ul li:nth-of-type(2)

他们的区别是
:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。

：nth-child同系列其他选择器及兼容性

【css3】:nth-child(n)

【css3】:nth-last-child(n)

【css3】 :only-child

【css2】:first-child

【css3】:last-child

【css3】:nth-of-type(n)

【css3】:nth-last-of-type(n)

【css3】:first-of-type

【css3】:last-of-type

【css3】:only-of-type

理解了nth-child和nth-of-type的用法，那同系列的其他选择器就好理解了，只是一个前后顺序顺数倒数的区别。
【css2】兼容ie7+，【css3】兼容ie9+
这里有一个库据说可以让这些css3的伪类选择器兼容ie6-8 selectiviz,按照文档里操作但是我没应用成功……看了旭哥的一篇文章的注意事项Selectivizr-让IE6~8支持CSS3伪类和属性选择器依然没成功……

平时写pc网页用到的场景并不是那么多额外添加一个js文件也不是我所希望的。移动端对css3的支持还可以。
但是有一个pc端常应用到的场景就是，在写一个div/ul列表块的时候，我们需要清除最后一个块的边距边线什么的，这个时候可以利用first-child这个css2选择器做一定的兼容处理

//以下写法效果相同
ul li:nth-child(2){
...//兼容ie9+}
ul li:first-child+li+li{
...//兼容ie7+}

以上参考文章：

css3的nth-child选择器的详细探讨

有用的:nth-child秘方

CSS3选择器:nth-child和:nth-of-type之间的差异
其他伪类选择器选择器的使用方法
可以参考：CSS3 选择器——伪类选择器