:nth-child(n) 选择器匹配属于其父元素的第 n 个子元素，借助这个特性，可以实现选择第偶数次序的子元素、选择一定范围内的子元素等“批量选择操作”。
而它比较难理解的地方是参数表达式中n的含义，以及如何进行数学运算，这也是面试中考察的难点。
专注前端与算法的系列干货分享，转载请声明原创： 「微信公众号：心谭博客」| xxoo521.com | GitHub
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要写在一起！
子元素 !== 后代元素
请思考下面这段代码的样式效果（1是黑色的，2和3都是红色的）
<html>
<head>
<style>
span:nth-child(2n) {
color: red;
}
style>
head>
<body>
<div>
<span>1span>
<span>2span>
div>
<span>3span>
body>
html>因为2是其父节点的第 2 个（偶数）子元素。3是其父节点的第 2 个子元素，第一个是
。
所以在借助nth-child匹配子元素时，要看清楚 DOM 树的层级关系。
