我的菜单有问题 - 当我将“nav”类添加到我的链接时，整个元素的悬停永久为白色 - 我无法更改它。当我删除导航时，我可以很容易地设计它。
有什么想法吗？
<body id="home" ng-controller="IndexController">
<nav class="navbar navbar-dark bg-dark">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" ng-click="change('main')" href="#">Main Page</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li ng-click="checkIt()"><a href="#">Stuff 1</a></li>
<li><a href="#">Stuff 2</a></li>
<li><a href="#">Stuff 3</a></li>
<li><a href="#">Stuff 4</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Registration</a></li>
<li><a href="#">Log in</a></li>
</ul>
</div>
</div>
</nav>
和我的 CSS:
$bg-color: #333;
$font-color: #fff;
$primary-color: #008ed6;
$dark-overlay: rgba(21, 21, 21, 0.8);
$icon-size: 30px;
body{
background-color: $bg-color;
color: $font-color;
}
.container{
padding: 8px;
}
.navbar{
border-bottom: $primary-color 3px solid;
opacity: 0.8;
background-color: $dark-overlay;
font-color: white;
}
#home{
min-height:700px;
background-size: cover;
background-attachment: fixed;
.fa{
color:$primary-color;
background: #fff;
padding: 4px;
border-radius: 5px;
font-size: $icon-size;
}
}
.navbar-brand{
color: white;
:hover{
color: darken(white, 15%);
}
}
a{
color: white;
}
a:hover {
color: darken(white, 15%);
text-decoration: none;
}
我也必须设置 a 的样式，因为字体的默认颜色是蓝色。当我将导航类添加到我的导航栏标题时，它工作正常。
@edit - 看看这个屏幕(我在评论中描述过)
最佳答案
尝试从 parent > child > child > child 访问规则以更改 css 规则，或者您可以在 css 规则之后使用 !important。 就是这样。
关于Bootstrap 3 中的 CSS 样式链接，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47895012/