<body>
<div>
<p>大儿子</p>
<div>二儿子</div>
<p>三儿子</p>
</div>
<p>二叔</p>
<div>三叔<div>
</body>
p:first-child 选中父元素里的第一个p元素;(大儿子被选中,二叔没有被选中,因为它不是父元素里的第一个元素)
p:first-of-type 选中第一个类型为p的子元素(大儿子、二叔被选中,因为大儿子是父元素div的第一个p元素,二叔是body的一个p元素)
<div>
<p class="item">大儿子</p>
<div class="item">二儿子</div>
<p class="item">三儿子</p>
<p class="item">四儿子</p>
<div class="item">五儿子</div>
</div>
<p class="item">二叔</p>
<p class="item">三叔</p>
<div class="item">四叔<div>
<style>
/* 1、:nth-child(n) 当前元素的父级的第n个元素 && 是当前元素 */
p:nth-child(3){ /* 四儿子 和 三叔*/
color:yellow;
}
/* 2.1、 p:nth-of-type(n) 当前p 的父级下的第n个p元素 */
p:nth-of-type(1){ /* 选中 大儿子和 二叔*/
color:red
}
p:nth-of-type(2){ /* 选中 三儿子*/
color:red
}
p:nth-of-type(3){ /* 选中 无*/
color:red
}
/* 2.2、.item:nth-of-type(n) 当前.item的父级下的第n个.item 注意:item的tagName改变会重复计算 */
.item:nth-of-type(2){ /* 选中 三儿子 五儿子 三叔 四叔*/
color:blue;
}
</style>