:last-of-type未给最后一个按钮加边框，因其匹配同类型元素中最后一个，而非父容器中视觉或结构上的最后一个按钮；若按钮间夹杂其他元素或存在空白文本节点，易导致失效。
为什么 :last-of-type 没给最后一个按钮加边框？
因为 :last-of-type 匹配的是「同类型元素中最后一个」，不是「父容器里最后一个按钮」。如果按钮前后夹着其他元素（比如 、 或文本节点），它就可能失效——哪怕 DOM 里最后一个子节点确实是 ，只要前面还有别的 同级兄弟，而它们后面又跟着非 button 元素，:last-of-type 就会选中「最后那个 button 类型的元素」，但未必是视觉上或结构上你认为的「最后一个」。
更可靠的写法：用 :last-child + 类名限定
如果按钮是连续排列、中间没插其他标签，且你控制 HTML 结构，直接用 :last-child 更直观；但为防意外（比如未来加了图标 或空格文本节点），建议配合类名约束：
.btn {
border: 1px solid #ccc;
}
.btn:last-child {
border-color: #007bff;
}前提是所有按钮都带 class="btn"，且它们在父容器中是连续的子元素。注意：:last-child 对空白文本节点敏感——如果按钮后有换行+缩进，可能生成一个文本节点，导致失效。
真正精准定位最后一个 :nth-of-type() 或 JS 回退
当结构复杂（如按钮混在 立即学习“前端免费学习笔记（深入）”； 最常被忽略的一点：伪类选择器优先级低，如果其他规则用了 中），又必须只作用于最后一个 ，:last-of-type 其实是对的，但得确认它是否被误判：
button 类型节点，但你想标出「DOM 顺序上最后一个」，button:last-of-type 是正确选择const buttons = document.querySelectorAll('button');
if (buttons.length) {
buttons[buttons.length - 1].style.border = '2px solid red';
}别忽略浏览器兼容性和伪类触发条件
:last-of-type 和 :last-child 都支持 IE9+，但要注意：
v-if（Vue）或 *ngIf（Angular）动态移除/插入，伪类会实时响应，但需确保框架没有包裹额外 DOM 层:last-of-type 还是找源码里最后一个 button
!important 或更具体的选择器（如 .container button），你的 button:last-of-type 可能被覆盖。打开 DevTools 的 Computed 标签页，看 border 是否被 override。
