纯HTML步骤条优化：仅首个元素含active类时不显示彩色线条

问题分析 #

你的步骤条在第2个及以后元素添加active类时功能正常，但首个元素active时会错误渲染彩色线条。核心需求是：

• 仅首个步骤active时，不显示任何彩色连接线条
• 仅active步骤之前的连接线条才着色

纯CSS解决方案（现代浏览器） #

利用CSS的:has选择器直接匹配active步骤之前的所有步骤，控制它们的连接线条颜色，无需JavaScript。

HTML结构

<div class="stepper">
  <div class="step active">步骤 1</div>
  <div class="step">步骤 2</div>
  <div class="step">步骤 3</div>
  <div class="step">步骤 4</div>
</div>

CSS代码

.stepper {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 1rem 2rem;
}

.step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  cursor: pointer;
}

/* 步骤圆圈样式 */
.step::before {
  content: "";
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #ccc;
  transition: background-color 0.3s;
}

/* 步骤右侧的连接线条（最后一个步骤不加） */
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 12px;
  left: calc(100% + 1rem); /* 与下一个步骤的间距匹配 */
  width: 2rem;
  height: 2px;
  background-color: #ccc;
  transition: background-color 0.3s;
}

/* 激活状态的步骤圆圈 */
.step.active::before {
  background-color: #2196F3;
}

/* 关键：仅active步骤之前的线条着色 */
/* 匹配所有后面存在active元素的步骤，也就是active之前的所有步骤 */
.step:has(~ .active)::after {
  background-color: #2196F3;
}

原理说明

• :has(~ .active)选择器会匹配所有后面存在active类步骤的.step元素，也就是active步骤之前的所有步骤
• 当首个步骤active时，没有任何步骤在它后面，因此该选择器不会匹配任何元素，所有线条保持灰色，符合需求
• 当active在第2个及以后步骤时，所有在它之前的步骤都会被选中，对应的连接线条自动变为激活色

兼容旧浏览器方案（含JavaScript） #

如果需要支持不兼容:has选择器的旧浏览器，可以用JavaScript给active步骤之前的所有步骤添加completed类，再通过CSS控制样式。

JavaScript代码

// 更新步骤条线条状态
function updateStepperLines() {
  const stepper = document.querySelector('.stepper');
  const activeStep = stepper.querySelector('.step.active');
  
  // 先移除所有已完成状态类
  stepper.querySelectorAll('.step.completed').forEach(step => step.classList.remove('completed'));
  
  if (!activeStep) return;
  
  // 给active之前的所有步骤添加completed类
  let prevStep = activeStep.previousElementSibling;
  while (prevStep) {
    prevStep.classList.add('completed');
    prevStep = prevStep.previousElementSibling;
  }
}

// 初始化执行
updateStepperLines();

// 可选：点击步骤切换active状态时更新线条
document.querySelectorAll('.step').forEach(step => {
  step.addEventListener('click', () => {
    // 移除所有active类
    document.querySelectorAll('.step.active').forEach(s => s.classList.remove('active'));
    // 给当前点击的步骤添加active类
    step.classList.add('active');
    // 更新线条
    updateStepperLines();
  });
});

补充CSS

/* 已完成步骤的线条和圆圈样式 */
.step.completed::after {
  background-color: #2196F3;
}
.step.completed::before {
  background-color: #2196F3; /* 可选：完成的步骤圆圈同步变色 */
}

内容的提问来源于stack exchange，提问作者Danish Ghazi