因为:nth-child(odd)按dom所有子元素位置计数，中间的、注释、空格等节点会导致序号偏移；应改用:nth-of-type(odd)只统计同标签元素，如ul.timeline li:nth-of-type(odd)可精准控制时间线左右交替。
为什么直接用 :nth-child(odd) 会错位？
垂直时间线要求左右交替，但很多人一上来就写 .item:nth-child(odd) { left: 0; }、.item:nth-child(even) { right: 0; }，结果发现第3个、第5个块全挤在左边——因为 :nth-child 数的是 DOM 树里的“位置”，不是你肉眼看到的“第几个内容块”。
中间插了 <time></time>、空格文本节点、注释，甚至一个隐藏的 <div class="spacer"></div>，都会让序号偏移。
更糟的是，语义化结构里常用 <ul><li></ul> 包裹每个事件，而 <li> 的兄弟节点还可能包含 <header></header>、<footer></footer> 等标签，进一步打乱计数。
用 :nth-of-type() 替代 :nth-child() 更可靠
:nth-of-type() 只统计同名标签（比如只数 <li>），无视中间混入的其他元素，对语义化时间线结构更友好。
假设你用 <ul class="timeline"></ul>，每个事件是 <li class="event">，那么：
ul.timeline li.event:nth-of-type(odd) {
grid-column: 1;
}
ul.timeline li.event:nth-of-type(even) {
grid-column: 3;
}
配合 display: grid 布局，三列网格（左轨道｜中线｜右轨道）就能稳住左右交错；
如果用 Flex 布局，也可以配合 margin-left: auto / margin-right: auto 控制单侧偏移；
关键点：必须确保所有事件容器都是同一标签名（如统一用 <li> 或统一用 <section></section>），否则 :nth-of-type() 也失效。
中线怎么画？别用 <hr>，用伪元素更可控
时间轴那条贯穿始终的竖线，很多人习惯塞个 <hr> 然后 rotate，结果发现响应式下断开、缩放失真、无障碍阅读器误读为“分隔线”。
真正稳定的做法是给父容器加伪元素：
.timeline::before {
content: '';
position: absolute;
top: 0; bottom: 0; left: 50%;
width: 2px;
background: #e0e0e0;
transform: translateX(-50%);
}
优点：
• 不占 DOM 节点，不影响语义和屏幕阅读器流
• 高度自动撑满，无需 JS 计算
• 可自由加 box-shadow、渐变、动画（比如 hover 时变色）
• 在移动端可设 width: 1px 配合 device-pixel-ratio 适配高清屏
时间戳和内容块如何对齐？用 position: relative + transform
交错布局里，右侧内容常需要“挂”在中线右边，但又不能靠 margin-left 硬推——那样会导致不同字号/行高下错位。
稳妥方案是把每个 .event 设为 position: relative，再用绝对定位锚定时间戳和内容区域：
- 时间戳统一用
<time datetime="..."></time>，语义清晰且利于 SEO -
.event time { position: absolute; left: 50%; top: 0; transform: translateX(-50%); }—— 居中悬停在中线上方 - 内容块用
transform: translateX(calc(50% + 2rem))（右）或translateX(calc(-50% - 2rem))（左），比纯 margin 更精准
注意：transform 不触发重排，性能比改变 left/margin 更好；
若内容块高度差异大，建议加 min-height 或用 grid-auto-rows: minmax(80px, auto) 防止挤压。
真正难的不是画出两条线、摆正几个块，而是当数据从 CMS 动态注入、支持多语言日期格式、还要兼容屏幕阅读器跳转时，DOM 结构是否还能保持语义连贯、CSS 是否仍能稳定计算位置——这些细节，往往在第一次加 v-for 或 map() 渲染时才暴露出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
