我们甚至使用这个办法来选择任意的子元素。例如，我们可以用 li:nth-child(4n)来完成4为倍数的所有元素的选择。
查看例子
兼容性
•IE9+
•Firefox 3.5+
•Chrome
•Safari
23. X:nth-last-child(n)
li:nth-last-child(2) {
color: red;
}
如果我有灰常多的li在ul里面，我只想要最后3个li怎么办？不必使用li:nth-child(397),你可以使用nth-last-child伪类。
这种技巧和第六条几乎一样有效，不过两者的不同之处在于它从结束开始收集，用回溯的方式进行。
查看例子
兼容性
•IE9+
•Firefox 3.5+
•Chrome
•Safari
•Opera
24. X:nth-of-type(n)
ul:nth-of-type(3) {
border: 1px solid black;
}
你应该有很多时候想要元素类型来选择元素而不是通过孩子。
想象一下标记5个无序列表（UL）。如果你想定义第三个ul，并且没有一个唯一的id来找到它，你就可以使用 nth-of-type(3)伪类了。在上面这个代码段中，只有第三个ul才会有黑色的边框。
查看例子
兼容性
•IE9+
•Firefox 3.5+
•Chrome
•Safari
25. X:nth-last-of-type(n)
ul:nth-last-of-type(3) {
border: 1px solid black;
}
没错，我们一样可以使用nth-last-of-type来从结束开始回溯这个选择器，来找到我们想要的元素
兼容性
•IE9+
•Firefox 3.5+
•Chrome
•Safari
•Opera
26. X:first-child
ul li:first-child {
border-top: none;
}
这个结构的伪类让我们可以选择某个元素的第一个子孩子。你通常可以使用这个办法来删除第一个或者最后一个元素的边框。
例如，你有一系列的rows，每一个都有border-top 和border-bottom。这种情况下，第一行和最后一行看起来会灰常怪。
很多设计师会使用first和last类来弥补这个缺陷。相反，你可以使用这些伪类来解决这些问题。
查看例子
兼容性
•IE7+
•Firefox
•Chrome
•Safari
•Opera
27. X:last-child
ul > li:last-child {
color: green;
}
与first-child相反，last-child会选择父节点的最后一个子节点。
例子：
我们建立一些例子来示范这些类的可能的用法。我们会建立一种风格来展示。
标记
<ul>
<li> List Item </li>
<li> List Item </li>
<li> List Item </li>
</ul>
没啥特别的，就是一个简单的序列。
Css
ul {
width: 200px;
background: #292929;
