: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
更健壮，尤其适合按钮组中混有
:first-of-type
/
:last-of-type
，如需兼容，得用 class 手动标记
如何给第一个和最后一个按钮设置不同圆角
假设按钮都在一个
内，且都是
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
可能不够——新增按钮插入中间时，原先的「最后一个」可能变成中间，但样式没更新。
Eclipse导入Android或其他的JAVA项目的正确方法 WORD版
本文档主要讲述的是Eclipse导入Android或其他的JAVA项目的正确方法；希望本文档会给有需要的朋友带来帮助；感兴趣的朋友可以过来看看
下载
此时建议配合 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
应用于
-webkit-appearance: none
移除原生样式
必须同时设置
background-color
和
border
，否则圆角可能被裁剪
避免用
%
值做
border-radius
（如
50%
），改用
px
或
em
提高一致性
如果按钮含图标（
overflow: hidden
或 viewBox 裁剪问题
实际最常出问题的不是选择器写法，而是父容器里藏了看不见的文本节点，或者忘了重置按钮的默认
appearance
。先检查 computed styles 里的
border-radius
是否真的被应用，再回头调选择器。