Question

下面是我在编码中找到并实现的引导程序。我试图产生从白色到绿色的悬停效果。但是，这不是让我这样做的。我的sass文件没有覆盖引导程序。有人可以帮忙吗？感谢。

 <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文件，以便最后解析它们。它们被称为级联样式表有一个原因:)

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感到满意并更新引导核心，那么这是一个非常先进的选择。

我假设您还在使用:hover？

如果您只是造型nav li{ color: white}，然后#activeRow { color: green}无效。您需要使用#activeRow:hover

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

Answer 2

SASS规则必须是：

#activeRow>a:focus,#activeRow>a:hover
   background-color: green

示例：https://codepen.io/anon/pen/MOxZaE

CSS没有覆盖Bootstrap

2 个答案: