:nth-child()、:nth-last-child() 与 :nth-of-type()、:nth-last-of-type()

今天我们来继续学习吧。这三个伪类看起来好像啊！那么它们的作用是什么呢？我只能说，这函数 CSS3 中非常好用的东西哦。

:nth-child( )

:nth-child( ) 是一个 CSS 伪类选择器，它允许你根据容器中的索引（源顺序）来选择元素。

也就是说，它可以根据索引来改变。比如你想要 div 中第几个标签变化，那么就可以使用它，指哪打哪！

举个例子：
我们先创建一个 div：

  
我
  
爱
  
你
  
知
  
道
  
吗

接着我们想要它们按照我们的想法改变颜色：

div p:nth-child(2n) {
  color: pink;
}

最后就可以看到下面的结果啦。

最后结果

想要注意的是，这些伪类操作符索引是以 1 开始的，而不像 JavaScript 是以 0 位索引开始的。

同样的，我们这里使用了 2n，也可以使用 even（偶数），达到同样的效果。

有了它以后，就可以按照一定的公式得到我们想要的子元素的样式。

---

:nth-last-child()

:nth-last-child( ) 是一个CSS伪类选择器，允许您基于它们的容器中的索引（源顺序）从最后一个元素向上选择相同类型的元素。

与上一个方法不同的是，这个方法的索引是反着来的，也就是说从最后一个子元素向上改变。你可以使用 JavaScript 中 indexOf 和 lastIndexOf 来对比着记住它们。

---

:nth-of-type( )

:nth-of-type( ) 是一个CSS伪类选择器，它允许您基于容器中的索引（源顺序）选择相同类型的元素。

我们之前讲到了 :first-child 与 :first-of-type 的区别。这里也是一样的。

它们之间的区别就在于子元素的位置和子元素类型的位置的区别。

我们上面的案例是使用 6 个 p 标签。加入将其中 3 个变化为 div 呢？

  
我
  
爱
  
你
  
知
  
道
  
吗

CSS 如下：

div div:nth-of-type(n) {
  color: pink;
}

结果就是只有 div 标签变化了，而 p 标签我们就没有选择了。

最后结果

---

:nth-last-of-type( )

这个也是一样的。所以我也不讲了。

---

总结

CSS 真的不算难，更多的是需要弄懂盒子模型，布局与 CSS3 中的 flexbox。前面的这些我就尽快把它们讲完吧。