选中某个元素所有儿子中的老几,关注的是所有儿子中的整体排名
:first-child 第一个儿子
:last-child 最后一个儿子
:nth-child(n) 第n个儿子
:nth-child(an+b) 连续多个
:nth-last-child(n) 表示倒数n个
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>儿子序选择器</title>
<style type="text/css">
/*选中某个元素所有儿子中的老几,关注的是所有儿子中的整体排名*/
/*:first-child 第一个儿子
:last-child 最后一个儿子
:nth-child(n) 第n个儿子
:nth-child(an+b) 连续多个
:nth-last-child(n) 表示倒数n个*/
/*:first-child 第一个儿子*/
p:first-child{
color: red;
}
/*:last-child 最后一个儿子*/
p:last-child{
color: blue;
}
/*:nth-child(n) 第n个儿子*/
h3:nth-child(3){
color: orange;
}
/*:nth-last-child(n) 表示倒数n个*/
h3:nth-last-child(2){
font-size: 30px;
}
/*:nth-child(an+b) 连续多个*/
.box p:nth-child(2n){
color: pink;
font-size: 40px;
}
</style>
</head>
<body>
<div class="box">
<p>p</p>
<p>p</p>
<p>p</p>
<h3>h3</h3>
<h3>h3</h3>
<h3>h3</h3>
</div>
<div class="box">
<h3>h3</h3>
<h3>h3</h3>
<h3>h3</h3>
<p>p</p>
<p>p</p>
<p>p</p>
</div>
</body>
</html>