:first-of-type 和 :last-of-type 更可靠，因它们按同类型元素排序，忽略其他标签干扰；动态场景建议用 js 动态添加 is-first/is-last 类控制样式。
为什么 :first-child 和 :last-child 有时不生效
常见原因是按钮不是各自父容器中的第一个或最后一个子元素。比如父元素里有文字节点、注释、空格，或者按钮前面有 或
，那
:first-child 就会匹配那个元素，而不是按钮本身。
更稳妥的做法是用 :first-of-type 和 :last-of-type —— 它们只看同类型（如都是 ）的顺序，忽略其他标签干扰。
- 如果按钮是连续排列且没有其他
干扰，:first-child可用；但一旦结构稍变，就容易失效 -
:first-of-type更健壮，尤其适合按钮组中混有或其他内联元素的场景 - 注意：IE8 不支持
:first-of-type/:last-of-type，如需兼容，得用 class 手动标记
如何给第一个和最后一个按钮设置不同圆角
假设按钮都在一个
内，且都是 移动端 safari 下
button { border-radius: 4px; margin: 0 4px; } .btn-group button:first-of-type { border-radius: 8px 0 0 8px; } .btn-group button:last-of-type { border-radius: 0 8px 8px 0; }这里用了「左上+左下」和「右上+右下」分别控制，避免中间按钮被意外影响。注意顺序：border-radius 四值写法是 top-left top-right bottom-right bottom-left。
立即学习“前端免费学习笔记（深入）”；
- 若按钮是行内块或 flex 布局，确保没有换行符或空格被解析为文本节点（可设
font-size: 0在父级再重置子级字体） - 如果按钮用
模拟，要改用a:first-of-type，且确保它们是同级同标签 - 用
display: flex的父容器时，:first-of-type依然有效，但:first-child更容易因伪元素（如::before）失效
当按钮数量动态变化时怎么保持样式稳定
比如用 javaScript 动态增删按钮，仅靠 :first-of-type 可能不够——新增按钮插入中间时，原先的「最后一个」可能变成中间，但样式没更新。
此时建议配合 JS 控制 class：
function updateButtonRounding() { const buttons = document.querySelectorAll('.btn-group button'); buttons.forEach((btn, i) => { btn.classlist.toggle('is-first', i === 0); btn.classList.toggle('is-last', i === buttons.length - 1); }); }再在 css 中写：
.btn-group button.is-first { border-radius: 8px 0 0 8px; } .btn-group button.is-last { border-radius: 0 8px 8px 0; }- 这种方式完全绕开选择器局限，适用于 vue/react 渲染列表、ajax 加载等场景
- 注意：不要在每次添加按钮后全量重算，可用
MutationObserver监听.btn-group子节点变化 - 如果按钮带 disabled 状态，
:disabled不影响:first-of-type判定，但 class 方式可以显式排除（如!button:disabled）
移动端 safari 下 border-radius 显示异常怎么办
某些 ios 版本（尤其是 15.x）对 border-radius 应用于 有渲染 bug：圆角只在部分边生效，或点击后消失。
- 临时修复：加
-webkit-appearance: none移除原生样式 - 必须同时设置
background-color和border，否则圆角可能被裁剪 - 避免用
%值做border-radius（如50%），改用px或em提高一致性 - 如果按钮含图标（
），确保 svg 没有overflow: hidden或 viewBox 裁剪问题
实际最常出问题的不是选择器写法，而是父容器里藏了看不见的文本节点，或者忘了重置按钮的默认 appearance。先检查 computed styles 里的 border-radius 是否真的被应用，再回头调选择器。