Html 重置CSS:n个类型计数器

我正在使用一个WP事件插件，该插件创建以下格式的事件列表：-

.event list.event{
浮动：左；
宽度：30%；
左边距：0；
背景：#eee；
}
跨度月{
宽度：100%；
边框底部：实心1px黑色；
显示：块；
明确：两者皆有；
}
.event list div.event:类型的第n个（3n）{
左缘：5%；
}
事件列表分区事件：类型的第n个（3n+1）{
左边距：0；
明确：两者皆有；
}
.event list div.event：第n个类型（3n+2）{
左缘：5%；
}

一月
事件1
事件2
事件3
事件4
二月
事件5
事件6
事件7
事件8
事件9
活动10

您只需将每个月的事件包装在一个新的div中，以便计数器在父级中重置为1

.event list.event{
浮动：左；
宽度：30%；
左边距：0；
背景：#eee；
}
跨度月{
宽度：100%；
边框底部：实心1px黑色；
显示：块；
明确：两者皆有；
}
.event list.month\u包装器div.event:n类型（3n）{
左缘：5%；
}
.event list.month\u包装器div.event:n类型（3n+1）{
左边距：0；
明确：两者皆有；
}
.event list.month\u包装器div.event:n类型（3n+2）{
左缘：5%；
}

一月
事件1
事件2
事件3
事件4
二月
事件5
事件6
事件7
事件8
事件9
活动10

为什么不考虑一些更简单的方法来实现这一点呢。这里是使用flexbox的一个想法，不需要使用复杂的选择器，因为您想要做的事情在实际的HTML结构中是不可能的

。事件列表{
显示器：flex；
柔性包装：包装；
证明内容：之间的空间；
}
.事件列表.事件{
宽度：30%；
左边距：0；
背景：#eee；
}
跨度月{
宽度：100%；
边框底部：实心1px黑色；
}

一月
事件1
事件2
事件3
事件4
二月
事件5
事件6
事件7
事件8
事件9
活动10

感谢您的支持，它肯定比我目前的实现要好。唯一的问题是，当一行上有2个事件时，它们会向两边对齐，而不是像我的float:left方法那样向左对齐（尝试将2月跨度向下移动1个事件）