Javascript 基于子元素设置父元素的样式

我正在创建一个时间线，为此，我需要一个特定事件时间的虚线边框。但是我不能把这两种风格结合在一起

简单地说，我需要为大多数时间线事件创建一个实心边框，除了少数事件，它们有一个公共类，我需要一个虚线边框。到目前为止，我有以下代码

我需要中断事件到事件4之间的边界是虚线而不是实线。任何基于CSS/JS的解决方案都可以

。时间线{
左边框：4px实心#A5A5；
边框右下半径：4px；
边框右上角半径：4px；
背景：rgba（255，255，255，0.03）；
颜色：rgba（0,0,0,0.8）；
字体系列：“源Sans-Pro”，无衬线；
保证金：0自动50px自动；
字母间距：0.5px；
位置：相对位置；
线高：1.4em；
字号：1.03em；
填充：30px；
列表样式：无；
文本对齐：左对齐；
字号：100；
最大宽度：30%；
}
.时间线。事件：之前，
.时间线。事件：之后{
位置：绝对位置；
显示：块；
排名：0；
}
.时间线。事件：之前{
左：-170px；
颜色：rgba（0,0,0,1）；
内容：attr（数据日期）；
文本对齐：右对齐；
字号：100；
字号：0.9em；
最小宽度：120px；
}
.时间线。事件：之后{
盒影：04px#a5a5；
左：-37.85px；
背景:#313534；
边界半径：50%；
高度：11px；
宽度：11px；
内容：“；
顶部：5px；
}
.时间表.活动{
边框底部：1px虚线rgba（255,255,255,0.1）；
垫底：25px；
位置：相对位置；
}

事件1
Lorem ipsum dolor sit amet



事件2
Lorem ipsum dolor sit amet



打破
Lorem ipsum dolor sit amet



事件4
Lorem ipsum dolor sit amet

你应该改变你的方法

试试这个：

。时间线{
边框右下半径：4px；
边框右上角半径：4px；
背景：rgba（255，255，255，0.03）；
颜色：rgba（0,0,0,0.8）；
字体系列：“源Sans-Pro”，无衬线；
保证金：0自动50px自动；
字母间距：0.5px；
位置：相对位置；
线高：1.4em；
字号：1.03em；
填充：30px；
列表样式：无；
文本对齐：左对齐；
字号：100；
最大宽度：30%；
}
.时间线。事件：之前，
.时间线。事件：之后{
位置：绝对位置；
显示：块；
排名：0；
}
.时间线。事件：之前{
左：-160px；
颜色：rgba（0,0,0,1）；
内容：attr（数据日期）；
文本对齐：右对齐；
字号：100；
字号：0.9em；
最小宽度：120px；
}
.时间线。事件：之后{
盒影：04px#a5a5；
左：-8px；
背景:#313534；
边界半径：50%；
高度：11px；
宽度：11px；
内容：“；
顶部：5px；
}
.时间表.事件h3{
边际上限：0px；
}
.时间表.活动{
左边框：4px实心#A5A5；
边框底部：1px虚线rgba（255,255,255,0.6）；
垫底：0px；
左侧填充：40px；
位置：相对位置；
}
.时间表.休息{
左边框：4个点#A5A5；
}

事件1
Lorem ipsum dolor sit amet



事件2
Lorem ipsum dolor sit amet



打破
Lorem ipsum dolor sit amet



事件4
Lorem ipsum dolor sit amet

你应该改变你的方法

试试这个：

。时间线{
边框右下半径：4px；
边框右上角半径：4px；
背景：rgba（255，255，255，0.03）；
颜色：rgba（0,0,0,0.8）；
字体系列：“源Sans-Pro”，无衬线；
保证金：0自动50px自动；
字母间距：0.5px；
位置：相对位置；
线高：1.4em；
字号：1.03em；
填充：30px；
列表样式：无；
文本对齐：左对齐；
字号：100；
最大宽度：30%；
}
.时间线。事件：之前，
.时间线。事件：之后{
位置：绝对位置；
显示：块；
排名：0；
}
.时间线。事件：之前{
左：-160px；
颜色：rgba（0,0,0,1）；
内容：attr（数据日期）；
文本对齐：右对齐；
字号：100；
字号：0.9em；
最小宽度：120px；
}
.时间线。事件：之后{
盒影：04px#a5a5；
左：-8px；
背景:#313534；
边界半径：50%；
高度：11px；
宽度：11px；
内容：“；
顶部：5px；
}
.时间表.事件h3{
边际上限：0px；
}
.时间表.活动{
左边框：4px实心#A5A5；
边框底部：1px虚线rgba（255,255,255,0.6）；
垫底：0px；
左侧填充：40px；
位置：相对位置；
}
.时间表.休息{
左边框：4个点#A5A5；
}

事件1
Lorem ipsum dolor sit amet



事件2
Lorem ipsum dolor sit amet



打破
Lorem ipsum dolor sit amet



事件4
Lorem ipsum dolor sit amet

这不是我想要做的。我希望垂直线是dott