Css 仅第一个和最后一个输入块上的边界半径

在设置第一个和最后一个输入块的边框时遇到问题

编辑：我正在使用React

我试过：

.float-input-block:first-child {
    border-radius: 0.8rem;
}

但什么也没发生

这是我的HTML：

<div className="float-input-block">
  <input className="float-input" type="text" id={name} {...rest} />
  <label className="float-label" htmlFor={name}>{label}</label>
</div>

以及它应该是什么样子：

---

我有一个不同的想法

.wrapper{
宽度：120px；
边框：1px纯红；
边界半径：15px；
溢出：隐藏；
}
.wrapper>行{
高度：30px；
文本对齐：居中；
背景：灰色；
}

1.
2.
1.
2.

虽然在大多数情况下我会使用@jinongun的答案，但下面是修复代码的解决方案

您应该将

className

更改为

class

，将

htmlFor

更改为

for

className

和

htmlFor

是JavaScript属性。

.float输入块：第一个子项{
边界半径：0.8雷姆0.8雷姆0；
}
.float输入块：最后一个子项{
边界半径：0.8雷姆0.8雷姆；
}
.浮点输入块输入{
显示：块；
高度：50px；
边框：1px实心#EEF5；
边界半径：0；
填充：0 20px；
框大小：边框框；
保证金：-1px；
背景：#FAFC；
}
.浮点输入块{
背景:#ededf6；
宽度：100vw；
高度：100vh；
显示：网格；
地点内容：中心；
}
身体{
保证金：0；
}

---

我刚刚用样式道具直接为容器设置了样式：

<FloatInput
    style={{ borderRadius: '0.8rem 0.8rem 0 0' }}
    name="nome"
    label="Nome"
    placeholder="Nome"
    required
    value={name}
    onChange={(e) => { setName(e.target.value) }}
/>

{setName（e.target.value）}
/>

---

谢谢所有帮助我的人。如果有人知道更好的方法，请随意写

请共享一个代码段。尝试指定输入块的直接父项，例如

.wrapper。输入块：第一个子项{边框：2px虚线#f00}`我必须使用htmlFor和类名，因为我在react上执行此操作：。浮点输入块：第一个子项{边框半径：0.8rem 0.8rem 0；}也适用于所有输入块T，未应用最后一个子样式…该样式仍应用于所有输入块，而不仅仅是第一个和最后一个：/
<FloatInput
    style={{ borderRadius: '0.8rem 0.8rem 0 0' }}
    name="nome"
    label="Nome"
    placeholder="Nome"
    required
    value={name}
    onChange={(e) => { setName(e.target.value) }}
/>