> 和上一篇文章《CSS实现有序列表编号方法知多少》一样，这篇文章也是出自孟智强同学之手，和上一篇文章一样，这篇文章也是为了让CSS的知识变得活色生香步骤条是一种用于引导用户按照特定流程完成任务的导航条，在各种分步表单交互场景中广泛应用。先来看一下几个主流前端 UI 框架中步骤条组件的样子： - [ElementPlus](https://element-plus.org/zh-CN/component/steps.html) ![1_eb7b8cc037eb2727219cb4b5028a6591_691x96.png@900-0-90-f.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/12f10513ee594fab9d6a144464ab5bd4~tplv-k3u1fbpfcp-watermark.image?) - [AntDesign](https://ant.design/components/steps-cn) ![2_6ca6e63d12cd80b3c2a866c210394413_762x56.png@900-0-90-f.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/43a469f32bf84b47b4c3ab65768e3879~tplv-k3u1fbpfcp-watermark.image?) - [OpenTiny](https://opentiny.design/tiny-ng/components/steps) ![3_c8b26b825e77d6e5b4a39d71e37ca985_594x58.png@900-0-90-f.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/af8a3c4b981746e4997ad7bc38d1449a~tplv-k3u1fbpfcp-watermark.image?) - [iView](https://www.iviewui.com/view-ui-plus/component/navigation/steps) ![4_5e432211fe6965b1d0326372d6e8b8ff_797x38.png@900-0-90-f.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d80436246d3e41169fb38f96fb7d1d21~tplv-k3u1fbpfcp-watermark.image?) 我们可以发现，步骤条通常由编号、名称和引导线三个基本要素组成。本文中要实现的是一个简单的步骤条，包含上述三个基本要素，下面是最终的效果图： ![5_72dc53815f27dbf472423a1e97bfc238_940x96.gif@900-0-90-f.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bd49b7c69dbd43d5868fc979faa6968d~tplv-k3u1fbpfcp-watermark.image?) 接下来将详细介绍实现过程。 ## 确定结构对于步骤条这种呈现顺序的列表结构，在 HTML 标签选择上，使用 `ul` 或 `ol` 标签可以让语义更加清晰，这里我们使用了 `ol` 标签，HTML 代码如下： ```

注册
域认证
身份校验
风险等级评估
开通账号

``` 由于步骤项需要水平排列，因此在 CSS 中用了 flex 布局，代码如下所示： ``` .steps { display: flex; justify-content: space-between; /* 按水平均匀分布，行首行尾两端靠齐 */ margin: 0; } ``` 现在，我们的“步骤条”已初步有那么点儿意思了，让我们继续完善细节。 ![6_d83a15e752d7bf81fe80417f56f8bad6_865x37.png@900-0-90-f.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/790073a9ae0f4df1ac5a1dca58fb63a9~tplv-k3u1fbpfcp-watermark.image?) ## 生成步骤编号步骤编号可利用 CSS 的原生能力来自动生成，在上一步中，`ol` 标签生成的编号并不好看，此处我们用 `::before` 伪元素和 CSS 计数器来实现带圈编号的样式，让步骤看起来更加清晰明了。 > 感兴趣的小伙伴可移步[《CSS实现有序列表编号方法知多少》](https://juejin.cn/post/7226911455877775419)一文查看相关知识点 ``` .steps { display: flex; justify-content: space-between; padding: 0; margin: 0; counter-reset: order; /* 定义CSS计数器 */ list-style: none; } .steps > li {counter-increment: order;} .steps > li::before { content: counter(order); /* 编号 */ display: inline-block; width: 1.4em; line-height: 1.4em; margin-right: .5em; vertical-align: middle; text-align: center; border-radius: 50%; border: 1px solid; } ``` 实现效果如下图所示： ![7_920241b5b7121961eca5c4f89e190d2d_872x36.png@900-0-90-f.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ff54e300d2d3403aa05a1101a82fe6f9~tplv-k3u1fbpfcp-watermark.image?) ## 实现引导线我们已经有了步骤编号和名称，接下来需要实现步骤引导线。引导线将各个步骤项连接为一体，使流程在视觉上具有指向性，它是个装饰性元素，所以不应该出现在 HTML中。由于前面的 `::before` 已经用于步骤编号，所以我们选择使用 `::after` 来实现引导线。 ``` .steps > li::after { content: ''; display: inline-block; width: 60px; vertical-align: middle; /* 让引导线和文本垂直居中 */ border-bottom: 1px solid #ccc; } ``` 效果如下图所示： ![8_64b9ccda62fe3f03224327f108615fcc_925x54.png@900-0-90-f.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fdd20b3324b94ee38d674c9dde71b117~tplv-k3u1fbpfcp-watermark.image?) 最后一个步骤项是不需要引导线的，所以我们改用 `:not` 伪类选择器把它过滤掉： ``` .steps > li:not(:last-child)::after { ... } ``` 现在我们面临一个难题：怎样确定引导线的宽度呢？使用固定宽度显然行不通，因为这会有很大的局限性。理想的解决方案是引导线宽度能够自动适应，占据除编号和名称文本以外的剩余空间。这种宽度自适应的场景，我们会很自然想到用 flex 布局来解决：只需将每个步骤项 `li` 标签的布局属性改为 `inline-flex` 盒子即可。 ``` .steps > li { flex: auto; /* 弹性宽度（根据其内容来调整） */ display: inline-flex; /* 内联块级弹性伸缩盒子 */ align-items: center; counter-increment: order; } .steps > li:not(:last-child)::after { content: ''; flex: 1; /* 占满 li 中的剩余宽度 */ margin: 0 1em; border-bottom: 1px solid #ccc; } ``` 现在的布局效果已经非常接近目标了： ![9_ea8af9564c39d395de29dacff6c31aa4_837x63.png@900-0-90-f.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fc6499788da642669f70fcaf4cc64f5c~tplv-k3u1fbpfcp-watermark.image?) 如果我们看得仔细一些，就会发现在最后一个步骤项的右边出现了一段空白，实际中我们希望它能够和右边对齐。 ![10_ce1e86cb2ac9bb0e01a91b1ece1f4fbc_869x87.png@900-0-90-f.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/75cb0b97443c45609b49d83e2685883f~tplv-k3u1fbpfcp-watermark.image?) 这个空白的产生和步骤项 `li` 标签的 `flex: auto` 这个 CSS 属性有关，该属性会根据当前容器的可用宽度来分配父容器宽度，当分配后还有剩余宽度时，前几个步骤项会有 CSS 属性为 `flex: 1` 的引导线来填补剩余宽度，但最后一个步骤项没有引导线，因此会出现空白。在了解根因后，我们只需要调整最后一个步骤项即可解决这个问题： ``` .steps > li:last-child { flex: none; } ``` 同时我们也意识到，当步骤项容器宽度不够时，作为 `flex` 子元素的圆形编号可能会被挤压变形： ![11_0178e94c536be00643a7fdf8f9806708_436x81.png@900-0-90-f.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e936d9bd24a244f988b7868e19ef6087~tplv-k3u1fbpfcp-watermark.image?) 解决方案也很简单，禁止 flex 子元素收缩： ``` .steps > li::before { ... flex-shrink: 0; /* 布局宽度不够时禁止收缩 */ } ``` ## 步骤条状态在调教好布局结构之后，我们来为步骤条增加状态。通常情况下，步骤条状态包括“已完成”、“进行中”和“未开始”三种，对应的装饰样式如下表所示： | 状态 | 步骤编号 | 步骤名称 | 步骤引导线 | | --- | ------------- | ----- | ----- | | 已完成 | 无背景色，边框和文本高亮色 | 文本高亮色 | 高亮色 | | 进行中 | 背景和边框高亮色，文本反色 | 文本高亮色 | 普通色 | | 未开始 | 无背景色，边框和文本普通色 | 文本普通色 | 普通色 | 对此我们定义普通色和高亮色这2个颜色变量，以方便代码维护和扩展。 ``` .steps { --normal-color: #666; /* 普通色 */ --active-color: #06e; /* 高亮色 */ ... } ``` 然后将所有步骤项默认以普通色呈现： ``` .steps > li { ... color: var(--normal-color); } ``` 引导线的颜色则默认自动继承字体颜色，同时为了避免引导线喧宾夺主，我们给它加了个透明度控制下颜色深度： ``` .steps > li:not(:last-child)::after { ... border-bottom: 1px solid; /* 不指定颜色，则自动继承自身color或父级color */ opacity: .6; } ``` 接下来是“已完成”和“进行中”的样式定义，需要注意“进行中”后面的引导线不能高亮。 ``` .steps > .done, .steps > .active { color: var(--active-color); } .steps > .active::before { color: #fff; background: var(--active-color); border-color: var(--active-color); } .steps > .active::after { color: var(--normal-color); /* “进行中”后面的引导线按普通色显示 */ } ``` 然后在 HTML 中调用对应的样式钩子： ```

注册
域认证
身份校验
风险等级评估
开通账号

``` 实现效果如下图所示： ![12_f8387f77997274ac7cb8b2de3c21574b_899x50.png@900-0-90-f.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/df7198307f8a43edb9fa29df5497f108~tplv-k3u1fbpfcp-watermark.image?) ## 最终方案就显示效果而言，现在可以收工了，但对于将优雅奉为圭臬的程序猿来说，这个步骤条还差点意思——用 `done` 和 `active` 样式钩子来分别标记“已完成”和“进行中”的状态——这并不优雅。 ```

注册
域认证
身份校验
风险等级评估
开通账号

``` 如果回想一下我们在前端 UI 框架中使用的步骤条，就会发现它只要关心当前进展到了哪一步，而“已完成”和“未完成”都是被组件内部自行处理的。那么，对于我们现在所做的步骤条，是否可以仅标记“进行中”，也就是只使用 `active` 样式钩子就可以了呢？就像下面这样： ```

注册
域认证
身份校验
风险等级评估
开通账号

``` 对于这样的 HTML 结构，`active` 这个钩子可继续沿用之前的 CSS 代码，实现当前步骤项的高亮效果，然后可以根据 `active` 这个类名匹配它前面的兄弟步骤项，实现与 `done` 这个类一样的效果。不过我们很快就会被现实打脸：**CSS 中根本没有“前兄弟选择器”这种东西**，因此无法根据 `active` 向前匹配。于是我们需要调整思路，逆向思考：既然无法匹配 `active` 前面的元素，那为什么不匹配其后面的元素呢？毕竟 CSS 中是有兄弟选择器的呀，至于 `active` 前面的元素，或许我们可以通过其父级来控制样式？现在思路清晰了许多。我们先把所有步骤项都默认设置为“已完成”状态的高亮样式： ``` .steps > li { ... color: var(--active-color); /* 改为“已完成”，之前的值是 var(--normal-color) */ } ``` 此时步骤条变成了这样： ![13_852e1873ac314c1865c4ad015c4cc011_862x62.png@900-0-90-f.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/35a250934d0f4ecb80aaf3caa455c533~tplv-k3u1fbpfcp-watermark.image?) 然后加上 `active` 的样式，假设当前是第4步，则效果如下： ![14_1ff29be550d6ee2cbf2eade316b7b76b_854x60.png@900-0-90-f.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/655c0472589940b688333be5f76ed72e~tplv-k3u1fbpfcp-watermark.image?) 接下来就是将 `active` 后面的步骤项改成“未开始”的样式，利用兄弟选择器轻松搞定： ``` .steps > .active ~ li { color: var(--normal-color); } ``` ![15_e083c3ea2acf8b9b438a7037e215d862_850x56.png@900-0-90-f.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c9432954ae9049d4b382977c85f3b1d1~tplv-k3u1fbpfcp-watermark.image?) 最后再来测试下整体效果： ![16_685afd9fd12b2449feba44a68e955dcc_943x324.gif@900-0-90-f.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/836028193aff47779df42262d808051c~tplv-k3u1fbpfcp-watermark.image?) 最终完整的 CSS 代码如下： ``` .steps { --normal-color: #666; --active-color: #06e; display: flex; justify-content: space-between; padding: 0; margin: 0; counter-reset: order; } /* 步骤项 */ .steps > li { flex: auto; display: inline-flex; align-items: center; counter-increment: order; color: var(--active-color); } .steps > li:last-child {flex: none;} /* 步骤编号（带圈数字） */ .steps > li::before { content: counter(order); flex-shrink: 0; width: 1.4em; line-height: 1.4em; margin-right: .5em; text-align: center; border-radius: 50%; border: 1px solid; } /* 步骤项引导线 */ .steps > li:not(:last-child)::after { content: ''; flex: 1; margin: 0 1em; border-bottom: 1px solid; opacity: .6; } /* 步骤状态 */ .steps > .active {color: var(--active-color);} .steps > .active::before { color: #fff; background: var(--active-color); border-color: var(--active-color); } .steps > .active::after, .steps > .active ~ li {color: var(--normal-color);} ``` 本文附件中提供完整代码的 demo，感兴趣的小伙伴可联系我们获取，可在现有基础上定制、扩展。下面是抛砖引玉： ![17_470a7c2deb3b89aa54a668ddfdc6a2aa_878x273.png@900-0-90-f.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/137e5708f5424d4e88322516d415979a~tplv-k3u1fbpfcp-watermark.image?) ## 知识点总结 - flex 容器的 `justify-content: space-between;` 可令子元素按显示方向均匀分布，两端分散对齐，实在是居家旅行之必备神器； - `inline-flex` 的盒子既能像 flex 容器那样轻松拿捏其子元素的布局，又能像行内块元素一样平易近人； - CSS 计数器洗剪吹一条龙：`counter-reset`、`counter-increment`、`counter(xxx)`； - `flex: `对于宽度（或高度）能占尽占，该是我的就是我的，能剩一点算我输； - `flex: auto` 从自身实际情况出发应占尽占，大家共同富裕不香吗； - `flex-shrink` 用来设置 flex 元素的可压榨基准，与它对应的是 `flex-basis`，用来设置可膨胀基准； - IE 都亡了，CSS 变量，放心用起来吧； - 强大的 CSS 伪类选择器，可以让代码更精简，还可以打出组合拳：`li:not(:last-child)::after`； - 平平无奇关键时刻又能打能抗的兄弟选择器：`.active ~ li`。