:last-of-type仅用于选中同类型标签的最后一个元素，不参与盒模型计算，无法撑开容器高度或宽度；它不改变布局行为，也不触发flex/grow等尺寸响应机制。
不能靠 :last-of-type 让最后一个元素“自动撑开”容器高度或宽度——它只选中类型相同的末项，和尺寸控制无关。
为什么 :last-of-type 无法撑开容器
这个伪类的作用是匹配**同类型标签中最后一个出现的元素**，比如 div:last-of-type 会选中所有 <div> 中排在最后的那个。它不改变盒模型、不触发 flex/grow 行为、也不影响父容器高度计算。<p>常见误用场景：</p>
<ul>
<li>想让最后一行卡片占满整行，却写 <code>.card:last-of-type { width: 100%; } → 实际只改了单个卡片宽度，破坏网格对齐
margin-bottom: auto 配合 :last-of-type 把底部元素“顶下去” → margin 不会反向撑高父容器，且 :last-of-type 可能选错（比如末尾有 <p></p> 就不选 <div>）<li>在 flex 容器里给 <code>:last-of-type 加 flex-grow: 1 → 如果前面有其他类型子元素（如 <header></header>），它根本不是“最后一个 div”，规则压根不生效
:last-child 和 :last-of-type 的关键区别
二者都常被拿来“定位末项”，但行为完全不同：
-
:last-child匹配父容器中**最后一个子节点**，无论标签名 —— 更适合布局控制 -
:last-of-type匹配父容器中**同类型标签的最后一个** —— 更适合样式微调（如给最后一篇<article></article>去掉下边距） - 如果父容器末尾是
<footer></footer>，而你想操作最后一个<section></section>，:last-of-type能命中，:last-child就不行；但反过来，如果结构是<div></div> <div></div> <p></p>，:last-child选中<p></p>，:last-of-type才选中第二个<div> <h3>真要“撑开”最后一个元素，该用什么</h3> <p>取决于你要撑开的方向和上下文：</p> <ul> <li>垂直方向占满剩余高度：给**父容器**设 <code>display: flex; flex-direction: column;，再给**最后一个子元素**加flex-grow: 1（不是用伪类选，而是直接写在 HTML 结构里或用:last-child精准定位） - 水平方向占满剩余宽度（如表单最后一栏）：用
flex: 1或width: 100%，前提是父容器是 flex 且未设flex-wrap: wrap - 最后一行左对齐（多列 flex wrap 场景）：必须用
.item:last-child { margin-right: auto; }，且确保父容器有flex-wrap: wrap、子项无flex-grow干扰 - 网格中最后一行填满：CSS Grid 更可靠，用
grid-auto-flow: dense+:last-child配合grid-column: 1 / -1，而不是依赖类型选择器
真正容易被忽略的是：撑开行为几乎总是依赖**父容器的布局上下文**（flex/grid/position），而不是某个伪类本身。写 :last-of-type 前，先确认父容器是否已启用能响应尺寸变化的布局模式——否则再精准的选择器也无效。
