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>