在使用bootstrap框架时自定义的样式不起作用怎么回事？

Question

<nav class="navbar navbar-default header" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="#page1" class="navbar-brand">Miss Zhang</a> </div><!-- navbar-header结束 --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right" id="menu"> <li class="active" data-menuanchor="page2"><a href="#page2">基本资料</a></li> <li  data-menuanchor="page3"><a href="#page3">专业技能</a></li> <li  data-menuanchor="page4"><a href="#page4">项目经验</a></li> <li  data-menuanchor="page5"><a href="#page5">实习经验</a></li> <li  data-menuanchor="page6"><a href="#page6">自我评价</a></li> </ul> </div> </div><!-- container结束 -->  </nav><!-- nav结束 -->.header{ position: fixed; top: 0; left: 0; z-index: 10;}.navbar{ background: #908d8d; transition: 1s all ease;}/*为了设置不同导航条背景色*/.navbar.blue {    background: rgba(71, 166, 173,1);}.navbar.black {    background: rgba(51, 51, 51,.7);}.navbar-right{ float: right;} .navbar-right li a, .navbar-right li a:visited{    color: #ffffff;!important;    font-weight: 500;    text-decoration: none;}.navbar-right li a:hover{ color: #ffffff; !important;} .navbar-default .navbar-toggle:focus{     background-color: #122b40;}.navbar-default .navbar-toggle:hover {    background-color: #122b40;}