html - CSS 没有覆盖 Bootstrap

Question

下面是我在编码中发现并实现的 Bootstrap 。我正在尝试生成从白色到绿色的悬停效果。但是它不允许我这样做。 我的 sass 文件没有覆盖 Bootstrap 。有人可以帮忙吗？谢谢。

 <div class="col-sm-3 sidebar">
       <ul class="nav nav-pills nav-stacked">
           <li  id="activeRow"class="active"><a href="#">Dashboard</a></li>
           <li><a href="#">Users</a></li>
           <li><a href="#">Suppliers</a></li>
           <li><a href="#">Online Course</a></li>
       </ul>
 </div>



 #activeRow
      background-color:green

Answer 1

这都是关于特异性的，正如评论中提到的，您的 SASS 文件需要在 Bootstrap 文件之后加载，以便最后解析它们。它们被称为级联样式表是有原因的:)

Read up on specificity here , 这是一个基本的 CSS 概念

尝试向您的父元素之一添加一个唯一的类/id(如果需要的话)，但这应该足够具体:

.sidebar .nav #activeRow:hover

如果没有则添加唯一的 id/class

#awesome.sidebar .nav #activeRow:hover

如果没有任何效果，你很着急等等。使用:

background-color: green !important

但这不是很好的做法，您最终可能会给自己挖一个坑。最好弄清楚什么具有最大的特异性并编写更具体的代码。

如果您熟悉 SASS 就更好了，download the bootstrap libraries SASS files并更新 Bootstrap 核心，尽管这是一个相当高级的选项。

我假设你也在使用 :hover？

如果您只是设置 nav li{ color: white} 的样式，然后设置 #activeRow { color: green}，那是行不通的。你需要使用 #activeRow:hover

要在检查器中查看解析的 CSS，请右键单击页面，单击检查，确保您位于“元素”选项卡上，然后您将看到: