垂直Steps应使用ol为容器、li为步骤项，内部用div包裹标题和描述，类名控制状态，伪元素实现圆点与连接线，响应式需适配水平布局并兼顾IE11兼容性。
垂直Steps的HTML结构怎么搭才匹配CSS控制逻辑
垂直Steps本质是用ol或ul做容器，每个步骤用li表示，内部嵌套div或span区分序号、标题、描述。关键不是语义多完美，而是层级必须扁平且可预测——否则伪元素定位会偏移。
推荐结构：
<ol class="steps-vertical">
<li class="step-item">
<div class="step-content">
<h4 class="step-title">第一步</h4>
<p class="step-desc">填写基本信息</p>
</div>
</li>
<li class="step-item">
<div class="step-content">
<h4 class="step-title">第二步</h4>
<p class="step-desc">上传证件照片</p>
</div>
</li>
</ol>
- 不用
data-step等自定义属性控制状态，纯靠类名如step-item--active或step-item--complete，CSS才好写条件样式 - 避免在
li里再套div容器层，否则:before伪元素定位时容易受padding或transform干扰 - 所有文字内容必须包裹在明确的子元素中（如
.step-title），不能让文本直接挂在li上，否则line-height和垂直居中会失控
用伪元素画圆点+连接线的关键CSS技巧
垂直Steps的视觉核心是左侧一列圆点 + 纵向连接线。纯CSS实现不依赖图片或SVG，全靠::before和::after配合绝对定位。
-
.steps-vertical设position: relative，作为所有伪元素的定位上下文 - 每个
.step-item设position: relative，用于精确定位本步的圆点 - 圆点用
.step-item::before：固定宽高+border-radius: 50%+background，top: 0.5em微调垂直对齐 - 连接线用
.steps-vertical::after：height: 100%+width: 2px+ 绝对定位居左，但注意它会覆盖第一个和最后一个li的上下部分，所以实际高度要减去首尾圆点半径 - 连接线颜色/粗细必须和圆点保持一致，否则视觉断裂；建议用
CSS custom property统一管理，比如--step-color: #0d6efd
状态样式（active / complete / disabled）怎么用class精准控制
Bootstrap Steps的状态切换靠JS加类，CSS只负责响应这些类。难点在于避免样式污染和层级错乱。
立即学习“前端免费学习笔记（深入）”；
-
.step-item--complete::before：背景色改成#198754（Bootstrap success），同时加content: "✓"并居中，字体大小设为0.7em，line-height: 1确保符号不溢出 -
.step-item--active .step-title：字体加粗 + 颜色加深，不要只改颜色，否则无障碍阅读时缺乏对比度 -
.step-item--disabled：整项opacity: 0.5+pointer-events: none，但注意opacity会影响子元素，所以禁用状态最好单独加.step-item--disabled .step-content控制文字灰度 - 禁用状态的圆点不能只变灰，要同步改
border: 2px solid #6c757d，否则和连接线混在一起看不清
响应式断点和IE兼容性避坑点
垂直Steps在小屏上通常要转成水平布局，但CSS媒体查询容易漏掉连接线方向切换，而且IE11对flex和伪元素支持有限。
- 水平转垂直的临界点建议用
@media (max-width: 768px)，对应Bootstrap默认sm断点，避免自定义断点造成维护混乱 - 水平模式下，把
.steps-vertical换成.steps-horizontal类，用display: flex+flex-wrap，连接线改用::after在每个.step-item:not(:last-child)后面画竖线 - IE11不支持
flex-direction: column在伪元素上的继承，所以垂直连接线必须用position: absolute硬写top/bottom，不能依赖flex流式计算 - 所有
rem单位必须配px回退，比如font-size: 0.875rem后面加font-size: 14px，否则IE11里字号会异常
最易被忽略的是连接线高度计算：当li之间有margin-bottom时，::after的height必须包含所有li高度总和减去首尾半径，手动算容易错——建议用calc()配合var(--step-count)变量，或者干脆放弃自动高度，用min-height兜底。
