如何根据父元素子元素数量动态设置CSS边框圆角？

可以通过CSS伪类和兄弟选择器实现，无需JavaScript，自动根据父容器内的子元素数量调整圆角样式：

完整CSS代码 #

/* 默认规则：单个textarea时，四个角全圆角 */
.parent .ta-1,
.parent .ta-2 {
  border-radius: 50%;
  /* 可添加其他基础样式，比如边框、内边距等 */
  border: 1px solid #ccc;
  padding: 8px;
  width: 100%;
  box-sizing: border-box;
}

/* 当父容器同时存在ta-1和ta-2时，调整两者的圆角 */
/* 给ta-1设置仅顶部圆角 */
.parent:has(.ta-2) .ta-1 {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* 给ta-2设置仅底部圆角 */
.parent:has(.ta-1) .ta-2 {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

方案说明 #

1. 默认样式：先给所有.ta-1和.ta-2设置全圆角，覆盖只有单个子元素的场景。
2. 多子元素判断：利用CSS :has()伪类检测父容器.parent中是否同时存在另一个textarea：
   • 如果父容器包含.ta-2，则给里面的.ta-1取消底部圆角，只保留顶部圆角；
   • 如果父容器包含.ta-1，则给里面的.ta-2取消顶部圆角，只保留底部圆角。

兼容备选方案（不使用:has()） #

如果需要兼容不支持:has()的旧浏览器，可以用相邻兄弟选择器实现：

/* 默认单个子元素全圆角 */
.parent .ta-1,
.parent .ta-2 {
  border-radius: 50%;
  border: 1px solid #ccc;
  padding: 8px;
  width: 100%;
  box-sizing: border-box;
}

/* 当ta-1后面跟着ta-2时，调整两者样式 */
.parent .ta-1 + .ta-2 {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.parent .ta-1:not(:only-child) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

这个方案通过+相邻兄弟选择器检测ta-1后面是否有ta-2，同时用:not(:only-child)确保ta-1不是唯一子元素时调整样式。

验证场景 #

场景1：父容器包含两个textarea #

<div class="parent">
  <textarea class="ta-1"></textarea>
  <textarea class="ta-2"></textarea>
</div>

此时ta-1仅顶部圆角，ta-2仅底部圆角。

场景2：父容器仅包含ta-1 #

<div class="parent">
  <textarea class="ta-1"></textarea>
</div>

此时ta-1保持全圆角。

场景3：父容器仅包含ta-2 #

<div class="parent">
  <textarea class="ta-2"></textarea>
</div>

此时ta-2保持全圆角。

内容的提问来源于stack exchange，提问作者itajackass