first-child、first-of-type、nth-child和nth-of-type的区别

yangyuhang

公共样式

1. span,label{
   
2.         display: inline-block;
   
3.         width: 80px;
   
4.         line-height: 30px;
   
5.         border: 1px solid #000000
   
6. }
   

复制代码

1、first-child匹配第一个子元素匹配第一个span且是第一个子元素

1. .test1 span:first-child{
   
2.         background-color: #FFA500;
   
3. }
   
4. <div class="test1">
   
5.     <span>111</span>
   
6.     <span class="s1">222</span>
   
7.     <span class="s1">333</span>
   
8.     <span class="s1">444</span>
   
9.     <span>555</span>
   
10. </div>
    

复制代码

错误示范（不是第一个子元素）

1. .test2 .s1:first-child{
   
2.         background-color: #FFA500;
   
3. }
   
4. <div class="test2">
   
5.     <span>111</span>
   
6.     <span class="s1">222</span>
   
7.     <span class="s1">333</span>
   
8.     <span class="s1">444</span>
   
9.     <span>555</span>
   
10. </div>
    

复制代码

因为第一个子元素span没有.s1，所有匹配不到

2、first-of-type匹配相同类型子元素的第一个匹配第一个label / span类型且是类型中的第一个元素

1. .test3 .s1:first-of-type{
   
2.         background-color: #FFA500;
   
3. }
   
4. <div class="test3">
   
5.     <label class="s1">111</label>
   
6.     <label class="s1">222</label>
   
7.     <span class="s1">333</span>
   
8.     <span class="s1">444</span>
   
9.     <span class="s1">555</span>
   
10. </div>
    

复制代码

s1可以匹配两种类型，两个label和3个span，这两种类型的第一个都将被匹配到

错误示范

1. .test4 .s1:first-of-type{
   
2.         background-color: #FFA500;
   
3. }
   
4. <div class="test4">
   
5.     <span>111</span>
   
6.     <span class="s1">222</span>
   
7.     <span class="s1">333</span>
   
8.     <span class="s1">444</span>
   
9.     <span>555</span>
   
10. </div>
    

复制代码

.s1匹配到3个span，但是它们的位置不在第一个，所以匹配不到

3、nth-child(n)匹配第n个子元素，序号从1开始，nth-child(1)等同于first-child匹配第2个元素

1. .test5 .s1:nth-child(2){
   
2.         background-color: #FFA500;
   
3. }
   
4. <div class="test5">
   
5.     <span>111</span>
   
6.     <span class="s1">222</span>
   
7.     <span class="s1">333</span>
   
8.     <span class="s1">444</span>
   
9.     <span>555</span>
   
10. </div>
    

复制代码

错误示范

1. .test6 .s1:nth-child(1){
   
2.         background-color: #FFA500;
   
3. }
   
4. <div class="test6">
   
5.     <span>111</span>
   
6.     <span class="s1">222</span>
   
7.     <span class="s1">333</span>
   
8.     <span class="s1">444</span>
   
9.     <span>555</span>
   
10. </div>
    

复制代码

匹配到3个子元素，但是它们没有在1号位置的

4、nth-of-type(n)匹配相同类型的子元素的第n个，序号从1开始，nth-of-type(1)等同于first-of-type

1. .test7 .s1:nth-of-type(2){
   
2.         background-color: #FFA500;
   
3. }
   
4. <div class="test7">
   
5.     <label class="s1">111</label>
   
6.     <label class="s1">222</label>
   
7.     <span class="s1">333</span>
   
8.     <span class="s1">444</span>
   
9.     <span class="s1">555</span>
   
10. </div>
    

复制代码

总结
first-child和nth-child匹配的是子元素的第几个

first-of-type和nth-of-type匹配的是某种类型的第几个

同样的还有last-child、nth-last-child、last-of-type、 nth-last-of-type(n)

以及only-of-type（子元素中同类型元素只有一个）和only-child（只有一个子元素）

Sorry

我超 原批

nie

我焯 原