码迷,mamicode.com
首页 > 其他好文 > 详细

子元素的伪类

时间:2019-07-10 01:32:40      阅读:178      评论:0      收藏:0      [点我收藏+]

标签:charset   nbsp   位置   col   bis   head   first   eve   div   

 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>

 

子元素的伪类

标签:charset   nbsp   位置   col   bis   head   first   eve   div   

原文地址:https://www.cnblogs.com/zuiaimiusi/p/11161352.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!