Почему мой пользовательский CSS не применяется к индикатору выполнения на моей странице JSP? ⇐ CSS

[Anonymous]

У меня есть страница JSP, на которой я пытаюсь реализовать индикатор выполнения для отображения статуса заказа (например, «Ожидание», «Подтверждено», «Доставка», «Доставлено»). Однако мой собственный CSS не применяется, хотя я использовал !important в нескольких местах для переопределения других стилей. Я подозреваю, что проблема может быть связана с тем, что другие стили (например, из Bootstrap или других фреймворков) переопределяют мой CSS.
Я добавил !important для переопределения стилей Bootstrap, но это все равно не работает.
У меня есть проверил HTML и убедился, что классы отображаются правильно.

Код: Выделить всё

Trạng thái đơn hàng


/* CSS cho step progress bar */
.order-status-container {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
}

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

.order-status-step::before {
content: "";
width: 100%;
height: 6px;
background-color: #e0e0e0 !important;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}

.order-status-step.active::before {
background-color: #28a745 !important;
}

.order-status-line {
background-color: #e0e0e0 !important;
height: 6px;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
width: 100%;
}

.order-status-step.active + .order-status-step .order-status-line {
background-color: #28a745 !important;
}

.progress-step span {
display: block;
padding-top: 20px;
}




Trạng thái đơn hàng




Chờ xử lý

= 1 ? 'active' : ''}">

Đã xác nhận

= 2 ? 'active' : ''}">

Đang giao hàng

= 3 ? 'active' : ''}">

Đã nhận hàng


....
//library

Я очистил кеш браузера и несколько раз пытался перезагрузить страницу.

Подробнее здесь: https://stackoverflow.com/questions/792 ... y-jsp-page