当伪元素的直接父元素也在重复时设置伪元素的样式

Question

代码：

questions.map((question, index) => (
<div
className={styles.questionContainer}}
>
<div className={styles.circle}>
<span> {index + 1} </span>
</div>
<span
>
{question.questiontext}
</span>
</div>

我正在进行react项目，在该项目中我循环遍历一个数组并创建动态div列表。使用display将div进一步划分为两个部分：flex。

在这个弯曲的左边，我想要一个连接另一个圆和创建链(时间线之类的东西(的圆和条。

我想隐藏为第一个元素创建的行，但当我尝试时

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

它隐藏了所有线条，因为圆的父对象也在重复。所以，任何人都可以帮助理解我们如何隐藏为第一个元素创建的线可以隐藏。

我正在努力在UI方面实现这个结果。

Answer 1

如果没有看到生成的HTML，我不能完全确定，但看起来你需要选择的似乎是第一个问题，然后在其圆圈上停止显示pseudo-before元素。

这样的东西：

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