React中如何仅为第二个和第三个下拉框添加上边框

你现有样式失效是两个原因导致的：

1. 样式书写顺序不对，你把伪类的特殊设置写在了通用border规则前面，后面的通用属性会直接覆盖前面的特殊配置
2. 选择器写法错误，:nth-child(3)前面没加&，匹配的是Select组件的子元素，不是自身为父容器下第三个子元素的Select组件，而且选择逻辑和你的需求正好相反。

直接替换成下面的代码即可：

const Select = styled.select`
  width: 100%;
  min-width: 0px;
  outline: 2px solid transparent;
  outline-offset: 2px;
  position: relative;
  appearance: none;
  background: inherit;
  padding-inline-start: 3rem;
  padding-inline-end: 2rem;
  height: 3.2rem;
  /* 先默认所有Select都没有边框，且统一去掉左右边框 */
  border: none;
  border-left: none;
  border-right: none;
  border-color: #cecece;
  /* 单独给第二、第三个同级的Select加上上边框 */
  &:nth-child(2),
  &:nth-child(3) {
    border-top: 1px solid #cecece;
  }
`;

如果你的Select组件不是同一个父容器下的直接同级元素，调整对应的选择器匹配规则就行。

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