定义
:first-child 选择器用于选取属于其父元素的首个子元素的指定选择器。
提示:p:last-child 等同于 p:nth-first-child(1)。
:last-child 选择器匹配属于其父元素的最后一个子元素的每个元素。
提示:p:last-child 等同于 p:nth-last-child(1)。
直接看定义稍微有点绕,定义中最关键的就是属于其父元素。如果不能理解的话我们通过几个经典的例子来让大家豁然开朗。
实例
first-child和last-child基本相同,我们通过看:last-child一并学习吧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css.css"/>
<style>
button:last-child{
width: 40px;
height: 40px;
background-color: aqua;
}
</style>
</head>
<body>
<div class='level-1'>
<button>我的父级是level-1</button>
<div class="level-2-1">
<button>我的父级是level-2-1</button>
<button>我的父级是level-2-1</button>
<button>我的父级是level-2-1</button>
<button>我的父级是level-2-1</button>
<button>我的父级是level-2-1</button>
</div>
<div class="level-2-2">
<button>我的父级是level-2-1</button>
<button>我的父级是level-2-1</button>
<button>我的父级是level-2-1</button>
<button>我的父级是level-2-1</button>
<button>我的父级是level-2-1</button>
</div>
<button>我的父级是level-1</button>
</div>
</body>
<script src="js/require.js" data-main="main" type="text/javascript"></script>
</html>
通过上面的例子我们很容易看出来last之间的关系,看似明白了那我们接下来继续看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css.css"/>
<style>
button:last-child{
min-width: 40px;
min-height: 40px;
background-color: aqua;
border-radius: 10px;
}
</style>
</head>
<body>
<div class='level-1'>
<button>我的父级是level-1</button>
<div class="level-2-1">
<button>level-2-1-btn</button>
<button>level-2-1-btn</button>
<button>level-2-1-btn</button>
<button>level-2-1-btn</button>
<button>level-2-1-btn-last</button>
<span>level-2-1-p-last</span>
</div>
<div class="level-2-2">
<button>level-2-2-btn</button>
<button>level-2-2-btn</button>
<button>level-2-2-btn</button>
<button>level-2-2-btn</button>
<button>level-2-2-btn-last</button>
<div class="level-2-2-1">
<button>level-2-2-1</button>
<button>level-2-2-1</button>
<button>level-2-2-1</button>
<button>level-2-2-1</button>
<button>level-2-2-1-last</button>
</div>
</div>
<button>level-1-btn-last</button>
<p>level-1-p-last</p>
</div>
</body>
<script src="js/require.js" data-main="main" type="text/javascript"></script>
</html>
是不是有点疑问,为什么只有一个btn生效。我们用button做详解,其他的都同理
- button:last-child寻找select的父级元素,直到查到body;
- 根据父级元素查找其最后一个子元素A;
- 对比该子元素A和button是否为同一类型,如果是则生效,否则不生效;
如果能看懂最后一个例子,那么对于last-child就出师了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css.css"/>
<style>
:last-child{
min-width: 40px;
min-height: 40px;
border:3px dashed rebeccapurple;
border-radius: 10px;
color: #f5293e;
}
</style>
</head>
<body>
<div class='level-1'>
<button>我的父级是level-1</button>
<div class="level-2-1">
<button>level-2-1-btn</button>
<button>level-2-1-btn</button>
<button>level-2-1-btn</button>
<button>level-2-1-btn</button>
<button>level-2-1-btn-last</button>
<span>level-2-1-p-last</span>
</div>
<div class="level-2-2">
<button>level-2-2-btn</button>
<button>level-2-2-btn</button>
<button>level-2-2-btn</button>
<button>level-2-2-btn</button>
<button>level-2-2-btn-last</button>
<div class="level-2-2-1">
<button>level-2-2-1</button>
<button>level-2-2-1</button>
<button>level-2-2-1</button>
<button>level-2-2-1</button>
<button>level-2-2-1-last</button>
</div>
</div>
<button>level-1-btn-last</button>
<p>level-1-p-last</p>
</div>
</body>
<script src="js/require.js" data-main="main" type="text/javascript"></script>
</html>