结构伪类选择器

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

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()

浏览器翻译如下：

相关阅读:
Spring Cloud Gateway 不小心换了个 Web 容器就不能用了，我 TM 人傻了
linux（软硬链接）
mybatisplus自动生成器
架构：应用架构的演进以及微服务架构的落地实践
codemirror6教程
SCM供应链管理系统解决方案：助力企业采购流程高效运行，全面降低供应链风险
Apache Shiro 1.2.4反序列化漏洞（CVE-2016-4437）
FISCOBCOS入门（十）Truffle测试helloworld智能合约
跟 AI 学 StarRocks：简介
SpringBoot加载测试类属性和配置说明

原文地址：https://blog.csdn.net/qq_50652600/article/details/134078546