:first-child和:last-child适用于结构清晰的首尾圆角设置，但遇非目标标签时需改用:first-of-type和:last-of-type；table需禁用border-collapse并配合overflow:hidden；圆角应按上下边分别设置，必要时加overflow:hidden裁剪内容。
用 :first-child 和 :last-child 分别设置首尾圆角
想让列表或容器中第一个和最后一个子元素带圆角，最直接的方式就是组合使用这两个伪类。但要注意：它们匹配的是“位置上的第一个/最后一个子元素”，不是“类型上第一个/最后一个”。比如 li:first-child 只在 li 恰好是父容器的第一个子节点时才生效。
常见写法：
ul li:first-child {
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
ul li:last-child {
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
- 适用于
ul/ol中的li、卡片容器中的直接子元素等结构清晰的场景 - 如果首尾元素中间夹着注释、文本节点或其它标签（如
div），:first-child就会失效——此时应改用:first-of-type - 圆角值建议统一单位（如都用
px或都用%），避免混合导致可维护性下降
当首尾不是同一种标签时，用 :first-of-type 和 :last-of-type
如果父容器里混有多种标签（比如 h2、p、div），而你想给其中第一个 p 和最后一个 p 加圆角，:first-child 就不顶用了。
这时该换用：
p:first-of-type {
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
p:last-of-type {
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
-
:first-of-type匹配的是父元素内“同类型中排第一”的元素，不依赖绝对位置 - 它比
:first-child更鲁棒，适合 CMS 输出不可控 HTML 的场景 - 注意：若页面中只有一个
p，:first-of-type和:last-of-type都会命中它，可能造成上下圆角重叠，需加条件限制或用其他方式隔离
表格边框圆角不能直接用 :first-child 加 border-radius
对 table 元素直接写 border-radius 几乎无效，因为表格渲染模型会忽略它。即使你给 tr:first-child th 或 td:last-child 单独设圆角，也常因边框合并机制（border-collapse）被裁掉。
- 必须配合
border-collapse: separate（禁用合并） +overflow: hidden在包裹容器上 - 更稳妥的做法是：用
div模拟表格结构，再对首尾子div应用:first-child/:last-child和圆角 - 如果必须用原生
table，推荐只对第一行第一列和最后一行最后一列单元格设单角圆角（如border-top-left-radius），并确保border-spacing为 0
圆角值写法要匹配实际需求，别硬套“四个值”
很多人一看到圆角就下意识写 border-radius: 8px 8px 0 0，但这是给“左上+右上”加圆角的写法，和首尾逻辑无关。针对首尾元素，应该按视觉目标拆解：
- 首元素只需上边两个角：用
border-top-left-radius+border-top-right-radius - 尾元素只需下边两个角：用
border-bottom-left-radius+border-bottom-right-radius - 避免写成
border-radius: 8px 8px 0 0后又单独覆盖某一个角，容易冲突且难调试 - 如果首尾元素是正方形（如头像、图标按钮），直接用
border-radius: 50%更简洁可靠
真正容易被忽略的点是：圆角是否需要配合 overflow: hidden 裁剪内容。比如首尾卡片有阴影或内部图片溢出，不加这个声明，圆角只是“边框弯了”，内容依然直角伸出。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
