last-of-type选择类名的问题

问题描述：使用last-of-type选择最后一个item元素时发现不生效。

   <main>
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="footer">footer</div>
    </main>
    <style>
      main .item {
        color: #000;
      }
      .item:last-of-type {
        color: red;
      }
    </style>

查了一下对last-of-type的描述：

:last-of-type 选择器匹配属于其父元素的特定类型的最后一个子元素的每个元素 这个描述看起来很拗口，咱们逐步分析。首先是匹配其父元素，也就是找到.item的父元素main。 需要注意的这里的特定类型指的是标签类型，而类名并不包含其中。看描述似乎是指选择器会选择父元素中相同标签类型最后一个元素，如果元素符合类名则会被选中。试了一下：

  <main>
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="footer">footer1</div>
      <p class="item">p</p>
      <footer class="item">footer2</footer>
    </main>
     <style>
      main .item {
        color: #000;
      }
      .item:last-of-type {
        color: red;
      }
    </style>

• 很意外，不仅相同标签被选择了，不同标签相同类名也会被选中。注意描述中最后到每个元素，也就是该选择器会选择所有不同标签下最后一个元素中类名相同的元素。如上图，div元素的最后一个子元素的类名不为item，所以没有被选择。

• 根据css扫描顺序从右往左，可以判断其筛选过程。首先遇到last-of-type，会筛选到dom树中所有type的最后一个元素，然后扫描到.item，根据类名判断这些元素是否符合。

• 解决筛选最后一个子元素问题，将.footer元素改为footer标签，使得仅item使用相同标签即可。