导航栏链接在页面刷新时更改颜色（引导程序）答案

【问题标题】：Nav bar link changes color on page refresh (Bootstrap)导航栏链接在页面刷新时更改颜色（引导程序）
【发布时间】：2021-10-07 11:22:07
【问题描述】：

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

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

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;
}

【问题讨论】：

我无法重现您的问题？
如果您分享您的代码 sn-p 或分享 stackblitz 链接，将会非常有帮助。谢谢
我想补充一点，我尝试在其他浏览器上对此进行测试，并且只有在本地使用文件时才会在 Firefox 上发生这种情况。另外，我在网上测试了网页的问题，也没有出现问题。这值得关注吗？如果不是，那么我可能会关闭这个问题，因为主要关心的问题是我不希望它以这种方式在线显示。

标签： html css bootstrap-4 navbar

【解决方案1】：

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

【讨论】：

css文件放在boostrap css之后。它被包含在 . 中

【解决方案2】：

首先确保在 bootstarp 类之后加载自定义 css 文件（如果没有，将自定义 css 行放在 bootstarp css 代码之后的标题中）

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

像这样：

.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%);
}

【讨论】：

我已按照建议添加了 !important，但它并没有解决问题。另外为了回答您的问题，我的自定义 css 文件是在引导 css 之后加载的。它位于引导 css 正下方的中。需要注意的是：蓝色也出现在它旁边的链接上（这些是文本链接。它们的颜色是白色的，但在刷新时它会像按钮的背景颜色一样暂时显示蓝色文本）
你的浏览器是什么？您是否尝试过其他浏览器？有时某些浏览器扩展会导致该问题。
火狐。它只发生在本地。如果我使用实际的网站，它不会发生。我检查了一下，它似乎在在线时运行良好。奇怪的是，它只发生在 Firefox 上。这值得关注吗？如果没有，那么我将关闭这个问题。

【解决方案3】：

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

【讨论】：

这不起作用。然而，有趣的是，现在当我刷新时，我会得到 3 种颜色，它们会在彼此之间快速循环。（我将 :visited 颜色更改为绿色以对其进行测试，它循环绿色、蓝色、粉红色，然后返回绿色）也许这可以帮助提供有关可能导致此问题的更多信息。
虽然这不起作用。它确实引发了检查 :focus 的想法。这解决了我在单击并将鼠标移开后遇到的另一个蓝色文本问题。这次真是万分感谢！（我试图投票，但由于我的代表低，它不会让我投票）