last-of-type与last-child有什么区别

ul:last-of-type{color:red} 作用对象是父元素下最后一个<ul>标签本身，ul:last-child，匹配父元素下最后一个子元素。

总结一下：:last-of-type，匹配父元素下，与当前选择器指定类型相同的最后一个子元素（不关心位置，只关心类型）。:last-child  匹配父元素下最后一个子元素（必须是最后一个，且类型匹配才生效）。

举个代码列子：

<div class="parent">
  <h3>标题</h3>
  <p>段落1</p>
  <div>div1</div>
  <p>段落2</p>
  <div>div2</div>
  <span>最后一个子元素（span）</span>
</div>

<style>
  /* 父元素最后一个子元素是span，不是p → 不生效 */
  .parent p:last-child {
    color: red;
  }
  /* 父元素下最后一个p（段落2）→ 生效 */
  .parent p:last-of-type {
    background: green;
  }

  /* 父元素最后一个子元素是span，不是div → 不生效 */
  .parent div:last-child {
    color: blue;
  }
  /* 父元素下最后一个div（div2）→ 生效 */
  .parent div:last-of-type {
    background: pink;
  }
</style>

好好看一个上面代码的注释，理解一下。

再给你举个易懂的列子：

<div class="parent">
  <p>段落1</p>
  <p>段落2</p>
  <div>我是div元素</div>
  <p>段落3（p类型最后一个，非父元素最后一个子元素）</p>
  <span>我是父元素最后一个子元素（span）</span>
</div>

<style>
  /* 需求：选中所有p标签的最后一个 → 只能用:last-of-type */
  .parent p:last-of-type {
    color: red;
    font-weight: bold;
  }

  /* 尝试用:last-child选p标签最后一个 → 失效（父元素最后一个子元素是span，不是p） */
  .parent p:last-child {
    background: yellow; /* 无效果 */
  }
</style>

运行效果：

核心总结：

• :last-of-type → 按类型筛选最后一个（不关心父元素整体最后一个子元素）；

• :last-child → 按位置筛选最后一个（不关心类型，或需同时满足类型 + 位置）；

• 
  

• 在实际代码开发中，你可以根据 “选类型最后一个” 还是 “选位置最后一个” 的需求来决定具体用哪个选择器来筛选标签元素。