！重要不适用于导航栏中的 a href 按钮

Question

我在 href 上悬停颜色发生变化。我将其中一个 a href 转换为 a href 按钮。它有自己的类名、悬停动画等，但由于 href 具有颜色悬停动画，按钮的颜色也会发生变化。即使我说“白色！重要”，它仍然适用于 href 的“橙色”。我该怎么办？

html

<li class="nav-item">
                  <a
                    class=" nav-link active bg-orange fw-normal mx-1 px-4 py-2 text-white rounded-pill"
                    aria-current="page"
                    href="#"
                    >Apply Now and Get %0 Commission<i
                      class="bi bi-arrow-down-right ms-3"
                    ></i
                  ></a>
                </li>

CSS

#main-menu a:hover, a:hover{color: #be4006!important;}

.bg-orange{color: #white!important;}

我写在上面了。即使我说“白色！重要”，它仍然适用于 href 的“橙色”。我该怎么办？

Answer 1

我看到您正在使用 !important 来覆盖 Bootstrap text-white 类，但这就是导致代码出现问题的原因。您不能多次对同一属性应用 !important。最好不要使用文本白色。

#main-menu a:hover, a:hover{color: #be4006;}
.bg-orange{color: #white!important;}