十一、同级别的选择器-CSDN博客

本文链接：https://blog.csdn.net/pale_moonlight/article/details/142627190

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>同级别</title>
       <style>
           /*同级别不区分类型给同级别中的第几个,要在本地资源管理器中打开*/
           /*第一个*/
           div:first-child{
               color: aqua;
           }
           /*最后一个*/
           div:last-child{
               color: blue;
           }
           /*指定第几个，第三个是p不是div不生效*/
           div:nth-child(3){
               color: red;
           }
           div:nth-child(4){
               color: purple;
           }
           /*倒数第几个,倒数第2个*/
           div:nth-last-child(2){
               color: yellow;
           }
           /*奇数行 odd*/
           div:nth-child(odd){
               background-color: aquamarine;
           }
           /*偶数行 even*/
           div:nth-child(even){
               background-color: springgreen;
           }
       </style>
   </head>
   <body>
       <div>11111111111</div>
       <div>22222222222</div>
       <p>p段落</p>
       <div>33333333333</div>
       <div>44444444444</div>
       <div>55555555555</div>
       <div>66666666666</div>
   </body>
</html>