CSS 结构伪类选择器案例

结构伪类选择器

  /*ul 的 第一个元素*/
    ul li :first-child{
     
        background: black;

    }

/*ul的最后一个元素*/
     ul li:last-child{
     
         background: red;
     }
/*  选中 p1  :定位到父级元素 选择当前的第一个元素
  选择当前p元素的父类,选取父类元素的第一个元素,并且是当前元素才生效 顺序
*/
    p:nth-child(1){
     
        background: aqua;
    }

/*  选中父元素,下的p元素的第二个,类型*/
    p:nth-of-type(2){
     
        background: yellow;
    }

• 完整案例

  
  "en">
  
      "UTF-8">
      
  
  
  
  
  p1
  p2
  p3
  
      
  p4
      
  p5
      
  p6