结构伪类选择器

结构伪类选择器
伪类选择器：用来描述一个元素的特殊状态！比如第一个元素、某个元素的子元素、鼠标点击的元素

1 first-child/last-child

/*ul的第一个子元素*/
ul li:first-child{
background: #0f35ad;
}
/*ul的最后一个子元素*/
ul li:last-child{
background: #0f35ad;
}
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
 
  <style>
      /*ul的第一个子元素*/
    ul li:first-child{
        background: #0f35ad;
    }
      /*ul的最后一个子元素*/
    ul li:last-child{
        background: #0f35ad;
    }
  </style>
</head>
<body>
<h1>h1</h1>
<p>p1</p>
<p>p2</p>
<p>p1</p>
<ul>
  <li>l1</li>
  <li>l2</li>
  <li>l3</li>
</ul>
</body>
</html>
```
浏览器翻译如下：

2 nth-child()

/*定位到父元素，选择当前的第一个元素，选择当前p元素的父级元素，选中父元素的第一个，并且是当前元素才有效*/
p:nth-child(1){
background: #0f35ad;
}

注意：如果第一个不是当前元素无效

浏览器翻译如下：

3 nth-of-type()

浏览器翻译如下：
相关阅读:
SpringBoot +Mybatis + Redis实现缓存（案例解析）
Linux下安装Docker保姆级教程
 Grafana系列-统一展示-6-Zabbix仪表板
 SpringBoot引入*.properties的属性
 leetcode 144.二叉树的前后序遍历（递归和非递归）
BI系统的分布式部署原理和技术实现
 java 大数据以及Hadoop相关概念介绍
 vue2使用change事件监听不了回车事件的问题
 使用element的过渡效果来做动效
 阿里云产品试用系列-Serverless 应用引擎 SAE
原文地址：https://blog.csdn.net/qq_50652600/article/details/134078546

伪类选择器：用来描述一个元素的特殊状态！比如第一个元素、某个元素的子元素、鼠标点击的元素

1 first-child/last-child

2 nth-child()

3 nth-of-type()