elt:nth-child(n)
n: 从1开始的正整数
查找匹配的规则：
- 找到当前元素的父元素下所有的子元素,然后在所有的子元素中找到第
n个元素，如果这个第n个元素是符合elt选择器选择的要求，就会被选中，否则什么也不做 - 如果
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开始的正整数
查找匹配的规则：
- 找到当前元素的父元素下的所有子元素的类型，然后再找到每个类型对应的所有元素，例如所有
div，所有的span等，然后从每种元素类型中开始计数查找第n个元素，符合就赋予样式，查找的结果也可能是多个类型元素，例如条件是类选择器，而这个类选择器对应多个元素类型 - 如果
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)举例
- 奇偶数匹配
elt:nth-child(odd)与elt:nth-child(even) odd代表奇数event代表偶数 - 倍数匹配
elt:nth-child(an)匹配所有倍数为a的元素,其中参数an中的字母n不可缺省，例如2n、3n、4n、5n等等 - 倍数分组匹配
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)从第三个标签开始到最后
-
- 反向倍数匹配
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)从第三个标签开始到第一个标签
-
网友评论