选中某个元素所有同种标签类型儿子中的老几,关注的是同种标签中儿子的排名情况
:first-of-type 同种标签中的第一个儿子
:last-of-type 同种标签中的最后一个儿子
:nth-of-type(n) 同种标签中的第n个儿子
:nth-of-type(an+b) 同种标签中的连续多个
:nth-last-of-type(n) 表示同种标签中的倒数n个
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>儿子类型序选择器</title>
<style type="text/css">
/*选中某个元素所有同种标签类型儿子中的老几,关注的是同种标签中儿子的排名情况*/
/*
:first-of-type 同种标签中的第一个儿子
:last-of-type 同种标签中的最后一个儿子
:nth-of-type(n) 同种标签中的第n个儿子
:nth-of-type(an+b) 同种标签中的连续多个
:nth-last-of-type(n) 表示同种标签中的倒数n个*/
/*:first-of-type 同种标签中的第一个儿子*/
.box p:first-of-type{
color: red;
}
/*:last-of-type 同种标签中的最后一个儿子*/
h3:last-of-type{
color: blue;
}
/*:nth-of-type(n) 同种标签中的第n个儿子*/
p:nth-of-type(3){
color: orange;
font-weight: bold;
}
/*:nth-last-of-type(n) 表示同种标签中的倒数n个*/
p:nth-last-of-type(2){
color: green;
font-size: 30px;
}
/*:nth-of-type(an+b) 同种标签中的连续多个*/
.teshu:nth-of-type(2n){
font-size: 50px;
color: yellow;
}
</style>
</head>
<body>
<div class="box">
<p class="teshu">p</p>
<p>p</p>
<p>p</p>
<h3 class="teshu">h3</h3>
<h3 class="teshu">h3</h3>
<h3>h3</h3>
</div>
<p>分割线--------------------</p>
<div class="box">
<h3 class="teshu">h3</h3>
<h3>h3</h3>
<h3>h3</h3>
<p class="teshu">p</p>
<p class="teshu">p</p>
<p>p</p>
<p class="teshu">p</p>
</div>
</body>
</html>