为什么颜色不应用于我的引导html_Html_Css_Twitter Bootstrap

为什么颜色不应用于我的引导html

html css twitter-bootstrap

为什么颜色不应用于我的引导html,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我从我的bootsrap导航栏开始。下面是我的基本代码的样子： index.html <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap 4 landing page</title> <link rel="stylesheet" type="text/css" href="css/b

我从我的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>

我不明白为什么那些颜色没有被应用。

例如，

.nav link

有

颜色：#f4

（白色），不适用。我看到的都是黑色。

.nav-link:hover{color:#f97300}

也是如此，它是橙色的。但将鼠标悬停在链接上可保持黑色。

您将被选择器覆盖，您可以在检查开发人员工具中的输出时看到该选择器

您可以添加

！重要信息

到您的值以覆盖该值，如

颜色：#f4！重要信息

，或提供bootstrap的css用于应用它的相同选择器专用性。像

.navbar light.navbar nav.nav link{color:red}

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

祝贺您的第一个答案！你能解释一下默认的引导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;
}