CSS3中nth-child需要注意的点

nth-child介绍

nth-child(n) 选择器匹配属于其父元素的第 n 个子元素。

使用它的时候需要注意几点：

第n个子元素的计数是从1开始，不是从0开始的
选择表达式中的字母n代表≥0的整数

它有3种常见用法

直接指明n的值：span:nth-child(1)
用even/odd分别代表偶数 / 奇数：span:nth-child(even)
借助n自定义选择范围：
- nth-child(2n)/nth-child(2n + 1)：偶数 / 奇数
- nth-child(n + 3)：第3个开始到最后

进阶用法

上面的用法中的第三部分，一般都是使用n，而有时候也会用到-n，比如选取前2个元素就是：nth-child(-n + 2)。

为什么是这样呢？其实运算：-n + 2 ≥ 0，就可以推出n ≤ 2。由此，结合两者自动取交集，我们就可以限制选择某一范围。

比如选择第6个到第9个，就是：:nth-child(-n+9):nth-child(n+6) 注意：不是nth-child(2 - n)，-n要写在一起！真正理解“子元素”的含义还是nth-child选择器，那么下面这段代码的样式是什么呢？

<html>
<head>
  <style>
    span:nth-child(2n) {
      color: red;
    }
  </style>
</head>
<body>
  <div>
    <span>1</span>
    <span>2</span>
  </div>
  <span>3</span>
</body>
</html>

答案是：1是黑色的，2和3都是红色的。

因为<span>2</span>是其父节点的第2个（偶数）子元素,<span>3</span>是其父节点的第2个子元素，第一个是<div></div>

所以辨别是否匹配的关键是：找到父元素，然后再计算在父元素中的位置。

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

nth-of-child：

它的属性就是按照所有类型标签的所谓整体队列进行排序筛选，也就是说不论你是h1，span还是p标签，使用这个属性你要遵循在DOM树中的顺序来进行操作。

nth-of-type:

简单来说nth-of-type会忽略其它标签的顺序而安装标签自身种类的顺序进行筛选，也就是选择的参照点并不是DOM数，而是自身。就是按照类型来计算，碰到一个同类型就加1。