React循环生成重复父元素时如何隐藏时间线首项伪元素连接线

你遇到的问题是因为 .circle:first-child::before选择器会匹配所有作为自身父元素第一个子元素的.circle节点，而每一个循环生成的.questionContainer容器内的.circle都满足「是父级第一个子元素」的条件，所以所有连接线都会被隐藏。

解决方案 #

方案1：纯CSS修改，无需调整JSX代码

所有循环生成的.questionContainer节点是平级关系，直接选中第一个容器内的.circle的伪元素隐藏即可：

.questionContainer:first-child .circle::before {
  display: none;
}

如果你的连接线是定义在::after伪元素上，把上述代码里的::before替换为::after即可。

方案2：React动态追加类名，适用场景更广泛

如果你的列表有过滤、排序等动态变化的场景，用JS逻辑判断第一个元素追加类名更稳妥：
修改遍历逻辑：

questions.map((question, index) => (
  <div
    className={`${styles.questionContainer} ${index === 0 ? styles.firstQuestionContainer : ''}`}
  >
    <div className={styles.circle}>
      <span> {index + 1} </span>
    </div>
    <span>
      {question.questiontext}
    </span>
  </div>
))

追加对应CSS规则：

.firstQuestionContainer .circle::before {
  display: none;
}

内容的提问来源于stack exchange，提问作者Akshay Salekar