子元素的伪类 

 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>

 

posted @ 2019-07-10 00:05  zuiaimiusi  阅读(278)  评论(0)    收藏  举报