大家好，我是前端西瓜哥。今天我们来学习一些长得很像的两兄弟 :nth-of-type 和 :nth-child。
:nth-child
首先根据 :nth-chilid 前的样式规则，找到所有匹配元素的所有兄弟元素。然后我们从中找出 符合位置规则 的元素，并且这些元素也 符合样式规则，就应用样式。
这个位置规则其实是一个 an + b 的表达式。其中 a 和 b 表示一个类型为整数的常数，如果值为 0，可以省略不写。n 是一个变量，为从 0 开始的递增整数集合。
这里我们给几个表达式例子：
- nth-child(2n+1)：匹配位置为奇数（即 1、3、5、7...）的元素。因为比较常用，比如表格的斑马线效果，所以我们可以用语义更好的关键字 odd 来替代 2n+1。需要特别注意的是，元素的索引是从 1 开始的，不是从 0 开始的。
- nth-child(2n)：匹配位置为偶数（即 2、4、6、8...）的元素。同 nth-child(even)。
- nth-child(-n+3)：匹配前三个元素。
- nth-child(1)：匹配首元素，同 :first-child。
下面我们看一个具体的例子。
HTML 和 CSS 如下：
<style> div.item:nth-child(2n+1) { border: 1px solid salmon; } </style> <div> <div>div1</div> <div class="item">div2 .item</div> <div class="item">div3 .item</div> <div class="item">div4 .item</div> <div>div5</div> </div>
渲染结果如下：
首先我们通过 div.item 找到 div2 这个元素，然后我们通过 2n+1 找到需要应用样式的兄弟元素。
符合规则 2n+1 有 div1、div3、div5，然后我们从中找出符合 .item 的，也就是 div3.item，给它应用样式。
:nth-of-type
:nth-of-type 和 :nth-child 非常像，也是通过在兄弟元素中找出符合 an+b 表达式的元素，给它们应用样式。
但有一点不同，就是元素的索引位置是从样式匹配的兄弟元素从上到下排序的。
我们看一个具体的例子。
HTML 和 CSS 如下：
<style> div.item:nth-of-type(2n+1) { border: 1px solid salmon; } </style> <div> <p>p1</p> <div class="item">div1 .item</div> <div class="item">div2 .item</div> <p>p2</p> <div class="item">div3 .item</div> </div>
渲染结果如下：
我们通过 div.item 匹配到 div1 元素，然后找出它的兄弟元素中所有匹配 div.item 的元素，给它们按顺序标上 1、2、3、4... 索引值。最后从里面挑选索引符合 2n+1 表达式，也就是奇数位置的元素。
总结
简单来说，:nth-child 是先圈定所有兄弟元素，给它们顺序标上索引，然后从中找到既符合表达式也符合 div.item 的元素。而 :nth-of-type 是先圈定符合 div.item 的所有元素给它们标上索引，从中找出符合表达式的元素。
我是前端西瓜哥，热衷于分享前端知识，欢迎关注我。
