不使用我的CSS样式的导航栏的背景颜色

我可以看到很多Stackoverflow和在线的不同方法来改变我的启动导航菜单的背景颜色，但它不工作，我只是不明白为什么。不使用我的CSS样式的导航栏的背景颜色

我试过删除我的其他CSS项目，以防他们是一个问题。我也尝试从导航div中删除id。

我的HTML：

<!DOCTYPE html> 
<html lang="en" > 
<head> 
    <meta charset="UTF-8"> 
    <title>Basic Front End Portfolio Page</title> 



     <link rel="stylesheet" href="css/style.css"> 


</head> 

<body> 
    <!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 

<div> 
<nav class="navbar navbar-default"> 
<div id="headertitlebar" class="container-fluid"> 
    <div class="navbar-header"> 
    <div id="title" class="navbar-brand"> 
    <p><a href="#" id="logo">johnsonville.net</a></p> 
    </div> 
    </div> 
    <div id="navigation"> 
    <ul class="nav navbar-nav navbar-right"> 
     <li class="active"><a href="#">Home</a></li> 
     <li class="active"><a href="#">Portfolio</a></li> 
     <li class="active"><a href="#">Contact</a></li> 
    </ul> 
    </div> 
</div> 
    </nav> 
    <div id="mainpage"> 
    <p> 
    <h3>I'm a beginner front end developer but an experienced DBA that is working to gather depth as a full stack developer. 
    </div> 
    </p> 
    <div id="portfoliopage"> 

    </div> 

    <div id="contactpage"> 

    </div> 
</div> 


</body> 
</html>

我的CSS：

#headertitlebar { 
    background-color: firebrick; 
    padding-left: 50px; 
    padding-right: 50px; 
} 
#title { 
    font-family: courier new; 
    font-size: 30px; 
    font-weight: 900; 
} 
#logo { 
    text-decoration: none; 
    color: black; 
} 

.nav li { 
background: red; 
}

来源

2017-12-02 Russ960

在引导样式之前加载样式意味着它通过引导样式被覆盖。加载靴带样式文件首先然后你自己 – Imphusius

@Imphusius我只是试过，它没有区别 – Russ960

把CSS上.navbar默认类。

.navbar-default { 
    background-color: firebrick; 
}

总是适合我。希望能帮到你吗？

我试过你的示例和1件事情是一个问题，你必须使用bootstrap的CSS BEFORE自定义CSS。像：

<!DOCTYPE html> 
<html lang="en" > 
<head> 
    <meta charset="UTF-8"> 
    <title>Basic Front End Portfolio Page</title> 


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
     <link rel="stylesheet" href="css/style.css"> 


</head> 

<body> 
    <!-- Latest compiled and minified CSS --> 
<style>#headertitlebar { 
    background-color: firebrick; 
    padding-left: 50px; 
    padding-right: 50px; 
} 
#title { 
    font-family: courier new; 
    font-size: 30px; 
    font-weight: 900; 
} 
#logo { 
    text-decoration: none; 
    color: black; 
} 

.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover { 
    background-color: red; 
} 
</style> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 

<div> 
<nav class="navbar navbar-default"> 
<div id="headertitlebar" class="container-fluid"> 
    <div class="navbar-header"> 
    <div id="title" class="navbar-brand"> 
    <p><a href="#" id="logo">johnsonville.net</a></p> 
    </div> 
    </div> 
    <div id="navigation"> 
    <ul class="nav navbar-nav navbar-right"> 
     <li class="active"><a href="#">Home</a></li> 
     <li class="active"><a href="#">Portfolio</a></li> 
     <li class="active"><a href="#">Contact</a></li> 
    </ul> 
    </div> 
</div> 
    </nav> 
    <div id="mainpage"> 
    <p> 
    <h3>I'm a beginner front end developer but an experienced DBA that is working to gather depth as a full stack developer. 
    </div> 
    </p> 
    <div id="portfoliopage"> 

    </div> 

    <div id="contactpage"> 

    </div> 
</div> 


</body> 
</html>

然后你的css不会被bootstrap的覆盖。

然后：我为你编辑好了吗？新的CSS。

来源

2017-12-02 17:37:43 Rustyjim

我想要菜单是从头另一部分不同的颜色我没有评论背景 - 颜色来自#headertitlebar并且使用了你的建议，我的标题是正确的，但菜单颜色仍然不是我的目标颜色 – Russ960

工作正常，我按照你的建议调低了它，但我认为你添加了正确的嵌套结构给了我什么我想要，谢谢。 – Russ960

不使用我的CSS样式的导航栏的背景颜色

回答

相关问题