1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title></title>
6 <style type="text/css">
7 /*
8 :first-child 可以选中第一个子元素
9 :last-child 可以选中最后一个子元素
10 :nth-child 可以选中任意位置的子元素
11 even表示偶数
12 odd表示奇数
13 first-of-type
14 last-of-type
15 nth-of-type
16 和:first-child这些类似，只不过child，是在所有的子元素中排列
17 而type，是在当前类型的子元素中排列
18 */
19 p:first-child{
20 background-color: aqua;
21 }
22 p:last-child{
23 background-color: cadetblue;
24 }
25 :nth-child(3){
26 background-color: bisque;
27 }
28 p:first-of-type{
29 background-color: chartreuse;
30 }
31 </style>
32 </head>
33
34 <body>
35 <span>我是span</span>
36 <p>我是一个p标签</p>
37 <p>我是一个段落</p>
38 <p>我是一个段落</p>
39 <p>我是一个段落</p>
40 <p>我是一个段落</p>
41 <p>我是一个段落</p>
42 <span>我是span</span>
43 <div>
44 <p>
45 我是一个p标签
46 </p>
47 </div>
48 </body>
49 </html>
