覆盖Bootstrap 3.0

Question

我在html中有这段代码

<div class="pru">
  <ul class="nav navbar-nav" id="bo">
    <li class="bos"><a href="#about">About</a></li>
  </ul>
</div>

这是我的CSS代码：

body div ul li.bos {
-webkit-transition: background-color 5s !important;
}

.pru {
    width:200px;
    height: 200px;
    margin: 250px auto;
    background-color: blue;
}

body div ul li.bos:hover {
    background-color: green;
    font-size: 32px;
}

当我悬停它时，我想将“li”组件的颜色从蓝色更改为绿色，但是bootstrap会覆盖我的代码，并将颜色更改为灰色。如何覆盖Bootstrap代码？

Answer 1

默认情况下，bootstrap将background-color应用于a元素而不是li。你应该调整你的css以实现a标签，如此

body div ul li.bos:hover a{
    background-color: green;
    font-size: 32px;
}