一文彻底搞懂nth-child和nth-of-type

elt:nth-child(n)

n: 从1开始的正整数

查找匹配的规则：

1. 找到当前元素的父元素下所有的子元素,然后在所有的子元素中找到第n个元素，如果这个第n个元素是符合elt选择器选择的要求，就会被选中，否则什么也不做
2. 如果 elt :nth-child(n) elt后面，:前面有空格，就是代表查找elt元素下的直接子元素的第n个元素，无论第n个元素是什么类型或者类都会被选中

下面举例验证

<div class="box">
  <h1>h1-1</h1>
  <span>span-1</span>
  <div>div-1</div>
  <h1>h1-2</h1>
  <span>span-2</span>
  <div>div-2</div>
  <h1>h1-3</h1>
  <span>span-3</span>
  <div>div-3</div>
</div>

css设置样式

.box h1:nth-child(1){
  background: red;
}
.box span:nth-child(1){
  background: blue;
}
.box span:nth-child(2){
  background: blue;
}
.box div:nth-child(3){
  background: yellowgreen;
}
.box :nth-child(8){
  background: red;
}

设置后的样式图

nth-child.png

• 第一个.box h1:nth-child(1)选择的第一个元素，并且是h1，而子元素中第一个元素正是h1，所以会被选中，背景色变红
• 第二个.box span:nth-child(1)选择的第一个元素，并且是span，而子元素中第一个元素是h1，所以不会被选中
• 第三个.box span:nth-child(2)选择的第二个元素，并且是span，而子元素中第二个元素正是span，所以会被选中，背景色变蓝
• 第四个.box div:nth-child(3)选择的第三个元素，并且是div，而子元素中第三个元素正是div，所以会被选中，背景色变黄绿色
• 第五个.box :nth-child(3)选择的第八个元素，无论第八个元素是什么，都会被选中，所以背景色变红

elt:nth-of-type(n)

n: 从1开始的正整数

查找匹配的规则：

1. 找到当前元素的父元素下的所有子元素的类型，然后再找到每个类型对应的所有元素，例如所有div，所有的span等，然后从每种元素类型中开始计数查找第n个元素，符合就赋予样式，查找的结果也可能是多个类型元素，例如条件是类选择器，而这个类选择器对应多个元素类型
2. 如果elt :nth-of-type(n) elt后面，:前面有个空格，就是代表先查找elt元素下面的所有子元素类型，包括子孙元素(子元素嵌套了一层，然后对嵌套的这一层做相同的匹配),然后对每个类型中的第n个元素赋予样式

下面举例验证

<div class="wrap">
  <h1>h1-1</h1>
  <span>span-1</span>
  <div>div-1</div>
  <h1>h1-2</h1>
  <span>span-2</span>
  <div>div-2</div>
  <h1>h1-3</h1>
  <span>span-3</span>
  <div>div-3</div>
  <h1>h1-4</h1>
  <span>span-4</span>
  <div>div-4</div>
  <div>
    <h1>孙h1-1</h1>
    <span>孙span-1</span>
    <div>孙div-1</div>
    <h1>孙h1-2</h1>
    <span>孙span-2</span>
    <div>孙div-2</div>
    <h1>孙h1-3</h1>
    <span>孙span-3</span>
    <div>孙div-3</div>
    <h1>孙h1-4</h1>
    <span>孙span-4</span>
    <div>孙div-4</div>
  </div>
</div>

css设置样式

.wrap h1:nth-of-type(1){
  background: red;
}
.wrap span:nth-of-type(1){
  background: blue;
}
.wrap span:nth-of-type(2){
  background: blue;
}
.wrap div:nth-of-type(3){
  background: yellowgreen;
}
.wrap :nth-of-type(4){
  background: red;
}

设置后的样式图

nth-of-type.png

• 第一个.wrap h1:nth-of-type(1)选择的是子元素中所有h1元素的第一个h1元素，背景色变红
• 第二个.wrap span:nth-of-type(1)选择的是子元素中所有span元素的第一个span元素，背景色变蓝
• 第三个.wrap span:nth-of-type(2)选择的是子元素中所有span元素的第二个span元素，背景色变蓝
• 第四个.wrap div:nth-of-type(3))选择的是子元素中所有div元素的第三个div元素，背景色变黄绿色
• 第五个.wrap :nth-of-type(4)选择的是所有类型的元素，每种类型元素集合中第四个元素，背景色变红
• 因为nth-of-type匹配的是子孙元素，所有嵌套层中的元素还是会按照上一层的规则做相同的匹配

nth-of-type还有一种情况，例如用类选择器选择多种类型标签，会怎么匹配？下面举例说明

<div class="list">
  <h1 class="item">h1-1</h1>
  <span class="item">span-1</span>
  <div class="item">div-1</div>
  <h1 class="item">h1-2</h1>
  <span class="item">span-2</span>
  <div class="item">div-2</div>
  <h1 class="item">h1-3</h1>
  <span class="item">span-3</span>
  <div class="item">div-3</div>
  <h1 class="item">h1-4</h1>
  <span class="item">span-4</span>
  <div class="item">div-4</div>
</div>

css设置样式

.item:nth-of-type(4){
  color:red;
}

设置后的样式图

选择多种类型标签.png

• .item:nth-of-type(4) 因为匹配的是所有的class是item的元素，类型有多个，所有会按照每个类型的第4个来匹配，选中赋上样式

最后介绍几种常用的匹配写法

• elt:first-child: 和 elt:nth-child(1) 一样
• elt:last-child: 选择子元素最后一个
• elt:nth-last-child(2): 选择子元素中倒数第二个元素
• elt:first-of-type: 和 elt:nth-of-type(1) 一样
• elt:last-of-type: 选择子元素某个类型中最后一个
• elt:nth-last-of-type(2): 选择子元素某个类型中倒数第二个元素

下面的匹配规则都适用于nth-child(n)或者nth-of-type(n)，所以就用nth-child(n)举例

1. 奇偶数匹配
   elt:nth-child(odd)与 elt:nth-child(even) odd代表奇数 event代表偶数
2. 倍数匹配
   elt:nth-child(an) 匹配所有倍数为a的元素,其中参数an中的字母n不可缺省，例如2n、3n、4n、5n等等
3. 倍数分组匹配
   elt:nth-child(an+b)或者elt:nth-child(n+b) 和 elt:nth-child(an-b)或者elt:nth-child(n-b)，其中n和加号+不可缺少，位置也不可以调换，这是语法规定的，字母a和b都是正整数或者0，加号+也可以变为负号-，例如：
   • elt:nth-child(2n+1)例如选择1、3、5、7....标签
   • elt:nth-child(2n-1)例如选择1、3、5、7....标签
   • elt:nth-child(3n+4) 例如选择4、7、10....标签
   • elt:nth-child(3n-4) 例如选择2、5、8....标签
   • elt:nth-child(3n+0) 例如选择3、6、9....标签
   • elt:nth-child(n+3)从第三个标签开始到最后
4. 反向倍数匹配
   elt:nth-child(-an+b)或者elt:nth-child(-n+b)括号里的一负一正都不可以缺少，不然没有意义，匹配方向是倒着算的，从第b个开始往回算，所以匹配的个数是不会超过b个，例如：
   • elt:nth-child(-4n+5) 例如选择1、5标签
   • elt:nth-child(-1n+4) 例如选择1、2、3、4标签
   • elt:nth-child(-n+3)从第三个标签开始到第一个标签