结构伪类选择器

目录

一、选择器:

二、伪元素:

---

一、选择器:

:first-child	选择父元素里边的第1个子元素
:last-child	选择父元素里边的最后1个子元素
:nth-child(2)	选择父元素里边第n个子元素
:nth-last-child(3)	选择父元素里边倒数第n个子元素

主体内容:

    

        
我是第1个li标签
        
我是第2个li标签
        
我是第3个li标签
        
我是第4个li标签
        
我是第5个li标签
        
我是第6个li标签
        
我是第7个li标签
        
我是第8个li标签
        
我是第9个li标签
    

结构伪类选择器用法:

1.选择父元素里边的第1个子元素

ul li:first-child {
    font-size: 50px;
    color: aquamarine;
}

2.选择父元素里边的最后1个子元素

ul li:last-child {
    font-size: 40px;
    color: #ccc;
}

3.选择父元素里边第n个子元素

• nth-child() 选择父元素里边的第n个子元素,将所有的子元素进行排序,不分种类
• 注:n是从0开始,0,1,2,3.......

ul li:nth-child(2) {
    font-size: 24px;
    color: red;
}

4.选择父元素里边倒数第n个子元素

• nth-child() 选择父元素里边的第n个子元素,将所有的子元素进行排序,不分种类
• 注:n是从0开始,0,1,2,3.......

ul li:nth-last-child(3) {
    font-size: 40px;
    color: blueviolet;
}

5.选择父元素里边偶数项的子元素 :nth-child(2n)  2n或者even

ul li:nth-child(2n) {
    font-size: 30px;
    color: blueviolet;
}

6.选择父元素里边奇数项的子元素 :nth-child(2n+1)  2n+1或者2n-1或者odd

• 2*0-1 -1
• 2*1-1  1
• 2*2-1  3

ul li:nth-child(2n-1) {
    font-size: 50px;
    color: red;
}

7.:nth-child(-n+i) 选择父元素里前i项子元素

ul li:nth-child(-n+4) {
    font-size: 24px;
    color: cadetblue;
}

8.:nth-child(n+i) 从第i项开始到最后一项结束

ul li:nth-child(n+7) {
    font-size: 40px;
    color: yellow;
}

9.选择父元素里边4的倍数项的子元素

ul li:nth-child(4n) {
    font-size: 35px;
    color: darksalmon;
}

10.选择 ul里边的第一个li里边的a

    


    

        
我是第1个a标签
        
我是第2个a标签
        
我是第3个a标签
        
我是第4个a标签
        
我是第5个a标签
        
我是第6个a标签
        
我是第7个a标签
        
我是第8个a标签
        
我是第9个a标签
    

11.选择父元素里边按照不同类型的第n个子元素

    
    
    
    
    


    

        
番茄
        黄瓜
        
水杯
        
        水果
        
西瓜
    

二、伪元素:

前伪元素:

1. 在盒子的最前边生成伪元素,伪元素相当于行内元素,可以转成块元素
2. content:'' 为必写项

.box::before {
    content: '西红柿';
    width: 30px;
    height: 30px;
    background-color: red;
}

后伪元素:

1. 在盒子的最后边生成伪元素,伪元素相当于行内元素
2. content:'' 为必写项

.box::after {
    content: '番茄';
    background-color: yellow;
}