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 @   hollg  阅读(339)  评论(0)  编辑  收藏  举报
相关博文：
·  CSS-高级选择器-层次选择器（后代选择器、子选择器、相邻兄弟选择器、相邻通用选择器）
·  CSS-三大基本选择器、选择器优先级、（标签选择器（可以选择到页面所有这个标签的元整）、类选择器（ 可以多个标签归类，是同一个class，可以复用）、id选择器（全局唯一））
·  CSS结构伪类选择器
·  结构伪类选择器
·  结构伪类选择器
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
点击右上角即可分享
微信分享提示
SQL AI 助手