子元素的伪类
Posted zuiaimiusi
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了子元素的伪类相关的知识，希望对你有一定的参考价值。
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>
以上是关于子元素的伪类的主要内容，如果未能解决你的问题，请参考以下文章