仅在 React 中的边框第二和第三下拉列表

Question

我只想在 second 和 third 下拉列表的顶部放置一条边框线。 我还是达不到。 CLICK HERE

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;
  &:nth-child(1),
  :nth-child(3) {
    border: none;
  }
  border: 1px solid;
  border-left: none;
  border-right: none;
  border-color: #cecece;
`;

Answer 1

主要问题是，您使用的是nth-child(1)，所以它适用于选择子项，但不适用于选择项本身。

在这种情况下推荐的修饰符将直接应用于元素，在这种情况下我会说nth-of-type。

&:nth-of-type(1) {
  background: red;
}

但是那个的主要问题是所有元素都必须在同一级别，或者查询必须是祖父母的一部分。

因此，您的代码将以这种方式工作：

const Item = styled.div`
  margin: 0.2rem 0;

  &:nth-of-type(2) select,
  &:nth-of-type(3) select {
    background: blue;
  }
`;

另外，利用styled-components。我包括了索引道具。并用于在您的样式中包含或不包含边框。就像：

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;
  border: ${props => props.index && [1, 2].includes(props.index) ? '1px solid #cecece' : 'none'};
  border-left: none;
  border-right: none;
  border-bottom: none;
`;

我已经分叉了你的 codepen，在这里你可以使用两种方法：

• 带索引
• 推荐使用祖父母查询（此方法使用背景）

https://codesandbox.io/s/dropdown-styled-components-forked-vpo6k?file=/src/index.js:285-366