CSS（3）结构伪类选择器

结构伪类选择器

ul的第一个子元素

 /*ul的第一个子元素*/
     ul li:first-child{
       background: #4a78c2;
     }

ul的最后一个子元素

 /*ul的最后一个子元素*/
     ul li:last-child{
       background: #c3d23b;
     }

定位到父元素，选择当前的第n个元素，顺序

 /*选中p2 : 定位到父元素，选择当前的第二个元素
     选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效，顺序
     */
     p:nth-child(3){    /*p:nth-child(1)不行，因为是h1不是p*/
       background: crimson;
     }

选中父元素下的p元素的第n个，类型

 /*选中父元素下的p元素的第一个，类型*/
     p:nth-of-type(1){
       background: chocolate;
     }

代码:

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>index</title>
 ​
   <!-- 避免使用，class，id选择器 -->
   <style>
     /*ul的第一个子元素*/
     ul li:first-child{
       background: #4a78c2;
     }
 ​
     /*ul的最后一个子元素*/
     ul li:last-child{
       background: #c3d23b;
     }
 ​
     /*选中p2 : 定位到父元素，选择当前的第一个元素
     选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效，顺序
     */
     p:nth-child(3){    /*p:nth-child(1)不行，因为是h1不是p*/
       background: crimson;
     }
 ​
     /*选中父元素下的p元素的第一个，类型*/
     p:nth-of-type(1){
       background: chocolate;
     }
 ​
     /*a:hover{
       background: black;
     }*/
 ​
   </style>
 ​
 </head>
 <body>
 ​
 <!-- <a href="">123</a> -->
 <h1>h1</h1>
 <p>p1</p>
 <p>p2</p>
 <p>p3</p>
 <ul>
   <li>li1</li>
   <li>li2</li>
   <li>li3</li>
 </ul>
 ​
 </body>
 </html>

 

 posted on 2021-06-20 21:23  琪琪又炸毛了  阅读(233)  评论(0)    收藏  举报