【伪类选择器】.class:first-of-type

伪类选择器与 .class 的用法特殊，按照 .class 实际所在位置使用 nth-of-type(n) 里的 n，与常规用法有异

<ol>
  <h1>hahaha</h1>
  <li class="box1">ccc</li>
  <li class="box1">ccc</li>
  <li class="box">
    bbb
    <p>①</p>
    <p>②</p>
    <p>③</p>
  </li>
  <li class="box">ccc</li>
  <li class="box">ddd</li>
</ol>

1、元素和伪类选择器

• E:first-child 选取元素E在同一级别下的首位，非首位不显示，需要借助 nth-child(n)

li:first-child {
  background: lightgreen;
  border: 1px solid #ddd;
  color: #fff;
}

• E:first-of-type 选取元素E在同一级别下的首位，非首位继续下寻选取同类型元素首位

li:first-of-type {
  background: lightblue;
  border: 1px solid #ddd;
  color: #fff;
} 

2、类和伪类选择器

• .class:first-child 选取类 .class 在同一级别下的首位，非首位不显示，需要借助 nth-child(n)

.box:nth-child(4) {
  background: lightblue;
  border: 1px solid #ddd;
  color: pink;
}  

• .class:first-of-type 选取类 .class 在同一级别下的首位，非首位不显示，需要借助 nth-of-type(n)

.box:nth-of-type(2) {
  background: lightblue;
  border: 1px solid #ddd;
  color: pink;   
}