CSS——15. 第一和最后子元素选择器
三种序列选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>第一子元素选择器</title>
<style type="text/css">
h3:first-child{
/*解释：h3:first-child：选择的是h3元素的父元素（父元素即是<body>元素）,h3是<body>中第一个子元素,必须同时满足两种条件才能选中*/
color: red;
}
</style>
</head>
<body>
<h3>我爱学习1</h3>
<h3>我爱学习2</h3>
<p>我爱学习3</p>
<p>我爱学习4</p>
<div>我爱学习5</div>
<div>我爱学习6</div>
</body>
</html>
满足第一子元素选择器的2个条件
- 选择的是h3元素的父元素（父元素即是元素）
- h3是< body>中第一个子元素,必须同时满足两种条件才能选中*/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*最后子元素选择器:*/
div:last-child{
/*选择的是div元素的父元素中,是div的最后一个子元素,必须同时满足两种条件才能选中*/
color: blue;
}
/*序列选择器一般用在列表中*/
</style>
</head>
<body>
<h3>我爱学习1</h3>
<h3>我爱学习2</h3>
<p>我爱学习3</p>
<p>我爱学习4</p>
<div>我爱学习5</div>
<div>我爱学习6</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*第一子元素选择器:*/
h3:first-child{
/*选择的是h3元素的父元素（即是<body>元素）中,是h3的第一个子元素,必须同时满足两种条件才能选中*/
color: red;
}
/*最后子元素选择器:*/
div:last-child{
/*选择的是div元素的父元素中,是div的最后一个子元素,必须同时满足两种条件才能选中*/
color: blue;
}
/*序列选择器一般用在列表中*/
</style>
</head>
<body>
<h3>我爱学习1</h3>
<h3>我爱学习2</h3>
<p>我爱学习3</p>
<p>我爱学习4</p>
<div>我爱学习5</div>
<div>我爱学习6</div>
</body>
</html>
