一、结构伪类选择器–查找单个

1. 作用与优势

 1.作用：根据元素在HTML中的结构关系查找元素
 2.优势：减少对于HTML中类的依赖，有利于保持代码整洁
1
2

2.选择器

"en">

    "UTF-8">
    "X-UA-Compatible" content="IE=edge">
    "viewport" content="width=device-width, initial-scale=1.0">
    
    


    

        

            
我是一个标签
            
我是一个标签
            
我是一个标签
            
我是一个标签
            
我是一个标签
            
我是一个标签
            
我是一个标签
        
    


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

二、结构伪类选择器–查找多个

• 括号内填写 n 结果为：0、1、2、3、4、5、6…
• 通过 n 可以组成常见公式

/* 找到前五个元素并设置背景颜色为粉红色 */
li:nth-child(-n+5) {
            background-color: pink;
        }
1
2
3
4

三、伪元素

• 伪元素：一般页面中的非主体内容可以使用伪元素。
• 必须设置 content 属性才能生效。
• 伪元素默认是行内元素（不能设置宽高）
• 种类：

• 伪元素应用

    
    
    
    
    


    
"father">
        我是father内部的内容
    


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

• 效果图