为什么颜色没有应用到我的引导HTML

问题描述

我从我的bootsrap导航栏开始。下面是我的基本代码的样子：

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Bootstrap 4 landing page</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
</head>

<body>

    <nav class="navbar navbar-expand-lg navbar-light">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" data-value="home" href="#">Home </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-value="projects" href="#">Projects</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-value="hobbies" href="#">Hobbies</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-value="education" href="#">Education</a>
                </li>
            </ul>
        </div>
    </nav>

    <script type="text/javascript" src="https://code.jquery.com/jquery.min.js"></script>
    <script type="text/javascript"
        src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

</body>

</html>

main.css

body{
    padding: 0;
    margin: 0;
    background:#f4f4f4;
}

.navbar{
    background:#F97300;
}
.nav-link,.navbar-brand{
    color: #f4f4f4;
    cursor: pointer;
}
.nav-link{
    margin-right: 1em !important;
}
.nav-link:hover{
    background: #f4f4f4;
    color: #f97300;

}
.navbar-collapse{
 justify-content: flex-end;
}

我无法弄清楚为什么未应用这些颜色。例如，.nav-link的{{1}}（发白）没有应用。我所看到的只是黑色。 color:#f4f4f4也是如此，它是橙色。但是将鼠标悬停在链接上可以保持黑色。

解决方法

在开发人员工具中检查输出时，您会看到选择器specificity被覆盖。

您可以将!important添加到您的值中，以覆盖color: #f4f4f4 !important之类的值，或者提供与引导程序css用来应用它的选择器相同的选择器。像.navbar-light .navbar-nav .nav-link { color: red }

您的自定义css可能会被默认的引导css覆盖，这就是为什么它不起作用的原因

html twitter-bootstrap