CSS的:nth-child，:first-child，:last-child

:nth-child(n)

选择器匹配父元素中的第 n 个子元素，元素类型没有限制 

 实现代码：

1.  
   <template>
2.  
   <div class="jo">
3.  
   <p>1</p>
4.  
   <p>2</p>
5.  
   <p>3</p>
6.  
   </div>
7.  
   </template>
8.  
   <style lang="scss" scoped>
9.  
   .jo {
10.  
    border: 1px solid white;
11.  
    font-size: 20px;
12.  
    color: white;
13.  
    width: 400px;
14.  
    text-align: center;
15.  
    p {
16.  
    line-height: 30px;
17.  
    &:nth-child(1) {
18.  
    background: red;
19.  
    }
20.  
    &:nth-child(2) {
21.  
    background: green;
22.  
    }
23.  
    &:nth-child(3) {
24.  
    background: blue;
25.  
    }
26.  
    }
27.  
    }
28.  
    </style>

:first-child、:last-child

• :first-child 选择器用来匹配父元素中第一个子元素。
• :last-child 选择器用来匹配父元素中最后一个子元素。

1.  
   <template>
2.  
   <div class="jo">
3.  
   <p>1</p>
4.  
   <p>2</p>
5.  
   <p>3</p>
6.  
   </div>
7.  
   </template>
8.  
    
9.  
   <style lang="scss" scoped>
10.  
    .jo {
11.  
    border: 1px solid white;
12.  
    font-size: 20px;
13.  
    color: white;
14.  
    width: 400px;
15.  
    text-align: center;
16.  
    p {
17.  
    line-height: 30px;
18.  
    &:first-child {
19.  
    background: red;
20.  
    }
21.  
    &:last-child {
22.  
    background: blue;
23.  
    }
24.  
    }
25.  
    }
26.  
    </style>

这篇好文章是转载于：学新通技术网