首先使用 CSS 选择器而不是第一个子类型答案

【问题标题】：Using CSS selectors first of type and not first child together首先使用 CSS 选择器而不是第一个子类型
【发布时间】：2021-10-30 21:51:02
【问题描述】：

我正在尝试使用纯 CSS 选择器进行一些样式设置，我的标记如下所示：

<div class="StyledRow">
   <div class="Row">Input 1</div>
   <div class="Row">Input 2</div>
</div>

<div class="StyledRow">
   <div class="Row">Input 1</div>
   <div class="Row">Input 2</div>
</div>

<div class="StyledRow">
   <div class="Row">Input 1</div>
   <div class="Row">Input 2</div>
</div>

呈现的元素是并排输入的 (2)，然后相互堆叠（因此用户可以添加任意数量的数据集）

以上是一个简化版本，但由于有额外的元素，我需要对我的风格更具体一点。比如StyledRow的当前样式是这样的：

const StyledRow = styled.div`
  display: flex;
  align-items: center;

  *:not(:first-child) > * {
    margin-left: 0.2rem;
  }
`;

我试图在第一个StyledRow 中定位第二个Row，这样样式就可以不同于其他使用margin-left: 0.2rem 的样式。我曾尝试将 first-of-type 和 not-first-child 一起使用，但没有任何乐趣。

任何建议将不胜感激！

【问题讨论】：

标签： html css css-selectors

【解决方案1】：

如果你使用

*:not(:first-child) > * {
  margin-left: 0.2rem;
}

它将应用于一切。所以如果你使用

.StyledRow:not(:first-child) > * {
  margin-left: 0.2rem;
}

样式将应用于除第一个迭代之外的 StyledRow 的每次迭代。

如果你使用：

.StyledRow:nth-child(2) > * {
  margin-left: 0.2rem;
}

那么这将专门针对 StyledRow 的第二次迭代。

【讨论】：