Html 在CSS中选择上一个sibling-更新时间轴

我正在寻找一个CSS解决方案，将背景颜色应用到当前事件的上一个事件的垂直时间轴上

.时间表{ 位置：相对位置； 显示器：flex； 利润率：10px； 弯曲方向：立柱； } .时间表.活动{ 位置：相对位置； 显示器：flex； 弯曲方向：行； 左侧填充：15px； } .timeline.event:：before{ 内容：； 位置：绝对位置； 顶部：0px； 左：2px； 底部：0px； 宽度：2倍； 背景：d9d9d9； } .timeline.descending.event.open+.event:nth-child3n-1:：before{ 背景：555555； } 事件1 事件2 事件3 事件4 事件5 事件6

---

如果您只想更改第n个索引，您可以增量更改n，并且可以选择从第二个索引开始；对于第一个兄弟姐妹，可以使用.timeline.descending.event:first child:：before:

在本例中，您还可以将：nth-child1与：first-child交换

请注意，CSS中存在一些错误

.时间表{ 位置：相对位置； 显示器：flex； 利润率：10px； 弯曲方向：立柱； } .时间表.活动{ 位置：相对位置； 显示器：flex； 弯曲方向：行； 左侧填充：15px； } .timeline.event:：before{ 内容：； 位置：绝对位置； 顶部：0px； 左：2px； 底部：0px； 宽度：2倍； 背景：d9d9d9； } .timeline.descending.event:nth-child1+.event:：before{ 背景：555555； } 事件1 事件2 事件3 事件4 事件5 事件6

---

如果您只想更改第n个索引，您可以增量更改n，并且可以选择从第二个索引开始；对于第一个兄弟姐妹，可以使用.timeline.descending.event:first child:：before:

在本例中，您还可以将：nth-child1与：first-child交换

请注意，CSS中存在一些错误

.时间表{ 位置：相对位置； 显示器：flex； 利润率：10px； 弯曲方向：立柱； } .时间表.活动{ 位置：相对位置； 显示器：flex； 弯曲方向：行； 左侧填充：15px； } .timeline.event:：before{ 内容：； 位置：绝对位置； 顶部：0px； 左：2px； 底部：0px； 宽度：2倍； 背景：d9d9d9； } .timeline.descending.event:nth-child1+.event:：before{ 背景：555555； } 事件1 事件2 事件3 事件4 事件5 事件6

---

嗯.event.open与.event没有相同的同级。您不能使用CSS选择以前的同级。第n个child/n个last child在这里对您没有帮助，除非您希望将它们与专门针对当前数据集定制的固定数字一起使用。在生成HTML时为最新的前一个事件提供自己的类可能是最简单的解决方案。event.open与.event没有相同的同级。您不能使用CSS选择前一个同级。第n个child/n个last child在这里对您没有帮助，除非您希望将它们与专门针对当前数据集定制的固定数字一起使用。在生成HTML时为最新的前一个事件提供自己的类可能是最简单的解决方案。

.timeline.descending .event:nth-child(1) + .event::before {
    background: #555555;
}