vertical-align以相反的方式工作

Question

My code是一个奇怪的垂直对齐行为的例子。它的作用相反，而且我无法捕捉每个“跨度”元素。

代码：

#timeline > ul >*:nth-child(even) span, #timeline ul >*:nth-child(even) h1 {
    vertical-align: top
} 

#timeline > ul >*:nth-child(odd) span, #timeline ul >*:nth-child(odd) h1 {
    vertical-align: bottom;
}

捕获正确的元素，但该元素的格式与它应该相反（据我所知）。代码的原因是一个项目，一个下来......在时间轴上。在纯CSS中，使用我的html代码不可能自动执行此操作（导致nth- 子（）选择器而不仅仅是nth（））。但是我试图在css中做到这一点，然后添加一些js。