CSS-结构伪类选择器（根据标签去定位元素（ ul li:last-child）、根据父类去定位元素（p:nth-child(1){））、根据标签类型去定位元素（p:nth-of-type(2){}）、把鼠标放到a标签文字上，改变文字颜色） 

结构：
   ul li:last-child

拆解：
    ul li:标签位置，就是说要定位ul标签中的li标签
    ” ：“：表示伪类，伪类选择器要写的符号。
　　last-child：定位ul标签中最后一个li元素

　　first-child：定位ul标签中第一个li元素
 

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>伪类选择器</title>
  <!--避免使用class id选择器-->
  <style>
        /*选中ul的第一个子元素*/
    ul li:first-child{
      /*
      ul li:标签
      first-child：第一个
      */
      background:#02ff00;
      
    }
    
        /*选中ul的最后一个子元素*/
        ul li:last-child{
      /*
      ul li:标签
      last-child：最后一个
      */
      background:#02ff00;
      
    }
    
  </style>
  
</head>
<body>
    <p>p1</p>
   <p>p2</p>
   <p>p3</p>
  <ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
  </ul>
  
  
  
</body>
</html>

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>伪类选择器</title>
  
  <style>
  
    /*只选中p1,定位到父元素，选择当前的第一个元素
    选中当前元素的父级元素，选中父级元素的第一个，但是这个p标签要在第一个元素，如果你要选中的p标签前面有其他标签元素，那就会阻碍生效，解决方式是我们把括号中的1，改成从父类第一行数，到你要定位的元素是第几行，那就把1，改成对应的数就行了
    */
    p:nth-child(1){/*根据父类去定位*/
      background:#02ff00;
    }
    p:nth-of-type(2){/*根据类型去定位,当前代码的父类元素都是body标签，表示选择父类中第二个类型为p标签的元素*/
      background:#020f00;
    }
    
  </style>
  
</head>
<body>
    <p>p1</p>
  
   <p>p2</p>
  
   <p>p3</p>
  <ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
  </ul>
  <p>p1</p>
  
  
</body>
</html>

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>伪类选择器</title>
  
  <style>
    a:hover{/*把鼠标放到a标签文字上，改变文字颜色
　　hover:动作
*/
      background:yellow;
    }
  </style>
  
</head>
<body>
    <p>p1</p>
  <a href="">44554</a>
   <p>p2</p>
  
   <p>p3</p>
  <ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
  </ul>
  <p>p1</p>
  
  
</body>
</html>

 

posted @ 2022-06-17 17:08  hollg  阅读(375)  评论(0)    收藏  举报