<style>
.box:first-child {
color: red;
}//选择同级的第一个元素,元素是class=box,颜色为红色
.box:first-of-type {
background: blue;
}//选择同级的第一个标签元素,并且这个元素是同级中的第一个标签,背景颜色为蓝色
.box :first-child {
font-size: 30px;
}//选择.box(父元素)里面的第一个元素,字体为30px
.box :first-of-type {
font-weight: bold;
}//选择.box(父元素)里面的第一个同类型的元素,字体为粗体
</style>
<div class="container">
<div class="box">div.box</div>
<p class="box">p.box</p>
<div class="box">div.box</div>
<div class="box">
<div class="item">div.item</div>
<p class="item">p.item</p>
</div>
<p class="box"></p>
</div>
