导航栏 link 在页面刷新时更改颜色 (Bootstrap)

Question

我是 HTML/CSS/Bootstrap 的新手。我更改了导航栏上 link 的颜色，但是我遇到了一个问题，即当我刷新页面时，导航栏上 link 的原始颜色（蓝色）一直出现。它只是暂时这样做，但是我希望它不要这样做。任何帮助将不胜感激！

我已根据要求添加了更多信息。希望这对您有所帮助。

HTML

<!DOCTYPE html>
<html lang="en">
<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">
    <div>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
        <link rel="stylesheet" href="style.css">

        <link href="https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Chakra+Petch:wght@300&family=Shadows+Into+Light&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
    </div>
    <title>...</title>
</head>
<body>
    <header>
        <nav id="nav-bar">
            <ul class="nav nav-pills">
                <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="../../index.html">Return to Homepage</a>
                </li>
                <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Sections</a>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#">...</a></li>
                    <li><a class="dropdown-item" href="#">...</a></li>
                    <li><a class="dropdown-item" href="#">...</a></li>
                    <li><a class="dropdown-item" href="#">...</a></li>
                    <li><hr class="dropdown-divider"></li>
                    <li><a class="dropdown-item" href="#">...</a></li>
                </ul>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">...</a>
                    </li>
                <li class="nav-item ms-auto">
                    <a class="nav-link" href="#">...</a>
                    </li>
            </ul>
        </nav>
    </header>
</body>

CSS

body {
    background-color: #212529;
}
a {
    text-decoration: none;
}

#nav-bar {
    background-color: none;
}

#nav-bar .active {
    background-color: #ff2d6c;
    border: 1px solid #ad1414;
}

#nav-bar .active:active {
    background-color: #ff2d6c;
    transform: scale(95%);
}

.nav-link {
    color: #ffffff;
    font-family: 'Roboto', sans-serif;
    font-size: clamp(.625rem, 3vw, 1rem);
}

.nav-link:active {
    color: #ffffff;
}

.nav-link:hover {
    color: #ff8c00;
}

.nav-link:focus {
    color: brown;
}

.dropdown-menu {
    background-color: #ff2d6c;
    border: 1px solid #ffffff;
}

.dropdown-item:hover {
    background-color: #212529;
    border: 1px solid #ffffff;
    color: #ffffff;
}

h2 {
    color: #ffffff;
    font-family: 'Chakra Petch', sans-serif;
    font-size: 1.5rem;
}


p {
    color: #ffffff;
    font-family: 'Oswald', sans-serif;
}

.guide-links li {
    list-style-type: none;
    font-family: 'Architects Daughter', cursive;
    color: #ffffff;
    text-decoration: underline;
}

.purchase {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}

.store {
    padding-left: 0;
}

.purchase img {
    width: auto;
    height: 2rem;
    margin: .5rem;
}

.purchase li {
    display: inline-block;
}

.guide-title {
    display: flex;
    justify-content: center;
    color: #ff0055;
    font-size: 2rem;
}

Answer 1

您将 css 文件包含在哪里？听起来好像是在呈现此页面后才包含它，导致应用样式出现延迟。

Answer 2

首先确保你的自定义 css 文件在 bootstarp class 之后加载（如果没有，将自定义 css 行放在 bootstarp header 之后 css 代码)

如果问题仍然存在，您可以将 !important to background-color 添加到 #nav-bar .active 和 #nav-bar .active:active class

像这样：

.nav-link {
    color: #ffffff;
    font-family: 'Roboto', sans-serif;
    font-size: clamp(.625rem, 3vw, 1rem);
}

#nav-bar .active {
    background-color: #ff2d6c !important;
    border: 1px solid #ad1414;
}

#nav-bar .active:active {
    background-color: #ff2d6c !important;
    transform: scale(95%);
}

Answer 3

您应该尝试使用 :visited 并尝试使用颜色 :)

导航栏 link 在页面刷新时更改颜色 (Bootstrap)

Nav bar link changes color on page refresh (Bootstrap)

html

css

navbar

bootstrap-4