JSP页面自定义CSS无法应用于进度条的问题排查

你的问题根本不是Bootstrap样式覆盖，而是自己的CSS逻辑和结构出了问题——重复的绝对定位元素互相遮挡、选择器逻辑错误、类名不匹配，导致样式根本没作用到正确元素上，加再多!important也没用。

核心问题分析 #

1. 元素重叠遮挡：你同时使用.order-status-step::before和内部的.order-status-line两个绝对定位线条，它们完全重叠，后者直接覆盖了前者的样式，导致active状态的样式无法显示。
2. 选择器逻辑错误：.order-status-step.active + .order-status-step .order-status-line的选择逻辑无法正确触发相邻步骤的线条样式变化。
3. 类名不匹配：CSS里写的.progress-step span，但HTML里对应的是.order-status-step span，类名写错导致文字样式不生效。

修复后的完整代码 #

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ include file="/common/taglib.jsp"%>
<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Trạng thái đơn hàng</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" />
  <style>
    /* CSS cho step progress bar */
    .order-status-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
      margin: 40px 0;
      padding: 0 20px;
    }

    /* 容器底部的基础灰色线条 */
    .order-status-container::before {
      content: "";
      position: absolute;
      top: 20px;
      left: 20px;
      right: 20px;
      height: 6px;
      background-color: #e0e0e0;
      z-index: 0;
    }

    .order-status-step {
      text-align: center;
      position: relative;
      flex: 1;
      z-index: 1;
    }

    /* 步骤的圆形标记点 */
    .order-status-step::before {
      content: "";
      width: 40px;
      height: 40px;
      background-color: #fff;
      border: 6px solid #e0e0e0;
      border-radius: 50%;
      position: absolute;
      top: -17px;
      left: 50%;
      transform: translateX(-50%);
    }

    /* 激活状态的标记点样式 */
    .order-status-step.active::before {
      border-color: #28a745;
      background-color: #28a745;
    }

    /* 动态进度填充线条 */
    .order-status-container::after {
      content: "";
      position: absolute;
      top: 20px;
      left: 20px;
      height: 6px;
      background-color: #28a745;
      z-index: 0;
      transition: width 0.3s ease;
    }

    /* 根据订单状态设置进度条宽度 */
    .order-status-container.state-0::after { width: calc(25% - 40px); }
    .order-status-container.state-1::after { width: calc(50% - 40px); }
    .order-status-container.state-2::after { width: calc(75% - 40px); }
    .order-status-container.state-3::after { width: calc(100% - 40px); }

    /* 步骤文字样式 */
    .order-status-step span {
      display: block;
      padding-top: 40px;
    }
  </style>
</head>
<body>
<div class="container">
  <h2 class="text-center mt-5" style="padding-top: 60px;">Trạng thái đơn hàng</h2>

  <!-- 根据订单状态添加对应的state类控制进度 -->
  <div class="order-status-container state-${userOrder.orderState}">
    <div class="order-status-step ${userOrder.orderState >= 0 ? 'active' : ''}">
      <span>Chờ xử lý</span>
    </div>
    <div class="order-status-step ${userOrder.orderState >= 1 ? 'active' : ''}">
      <span>Đã xác nhận</span>
    </div>
    <div class="order-status-step ${userOrder.orderState >= 2 ? 'active' : ''}">
      <span>Đang giao hàng</span>
    </div>
    <div class="order-status-step ${userOrder.orderState >= 3 ? 'active' : ''}">
      <span>Đã nhận hàng</span>
    </div>
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
</body>
</html>

关键改动说明 #

1. 移除了冗余的.order-status-line元素，改用容器伪元素实现基础线条和进度填充，彻底解决元素重叠问题。
2. 用圆形标记点替代纯线条，每个步骤的状态更直观，active状态下标记点会变成绿色。
3. 通过给容器添加state-${userOrder.orderState}类，动态控制进度条宽度，逻辑清晰且易维护。
4. 修正了类名错误，确保文字样式正确生效。
5. 去掉了所有不必要的!important，因为自定义CSS在Bootstrap之后加载，正确的选择器优先级足够覆盖框架样式。

内容的提问来源于stack exchange，提问作者L. Vanessa