Tailwind CSS 第一个子级和最后一个子级

Question

你们能帮我解决我在使用 tailwind css 时遇到的第一个孩子和最后一个孩子的问题吗？我一直在调试但看不到问题。

这是单选按钮的样子

所以，基本上我有一个使用无头用户界面创建的单选按钮组。单选按钮的代码如下。我没有粘贴整个代码，只粘贴有问题的部分。所以基本上我有一个项目数组，我正在映射它以创建每个单独的单选按钮。

    <div className="inline-block ml-2 mt-3">
        {items.map((item) => (
            <RadioGroup.Option
             as="div"
             key={item.value as number | string}
             value={item}
             className="inline-block w-[72px] h-[30px] cursor-pointer bg-[#f8f8f8] border-solid border border-[#b2b2b2] first-child:rounded-l-2xl last-child:rounded-r-2xl"
             >
                {({ checked }): JSX.Element => (
                <RadioGroup.Label
                as="p"
                className={`text-center p-1 text-sm first-child:rounded-l-2xl last-child:rounded-r-2xl ${
                  checked && 'bg-[#d7d7d7]'
                  } ${!disabled && 'text-[#989898]'}`}
                >
                  {item.label}
                </RadioGroup.Label>
                )}
            </RadioGroup.Option>
         ))}
    </div>

我的 tailwind.css 文件包含以下代码

.first-child\:rounded-l-2xl:first-child {
  border-top-left-radius: 1rem;
  border-bottom-left-radius: 1rem;
}

.last-child\:rounded-r-2xl:last-child {
  border-top-right-radius: 1rem;
  border-bottom-right-radius: 1rem;
}

因为我想获得第一个单选按钮和最后一个单选按钮的圆角，所以我使用了第一个子项和最后一个子项。看起来顺风CSS适用于按钮本身，但是当我也将样式应用到点击效果时，第一个子级和最后一个子级被应用到所有它们。有人能帮我吗？我已经被困在调试这个东西一个小时了。提前致谢！

Answer 1

//just use like this

first-child --> first
last-child --> last

<li class="flex py-4 first:pt-0 last:pb-0"></li>



<div class="first:rounded-l-2xl last:rounded-r-2xl w-full h-full">

</div>

Answer 2

像这样使用我希望为你工作

<RadioGroup.Label class="[&>*:first-child]:bg-gray-700"></RadioGroup.Label>