Html 引导中的继承（如何知道需要自定义的特定类）

我在学习bootstrap，在课堂上对如何实现它感到困惑，我的问题是：

<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar right">
                <list class="active"><a href="#">Home</a></list>
            </ul>
        </div>
    </div>
</nav>

---

我的问题是我们如何知道

active

类在

navbar inverse

navbar-nav

中？为什么不

nav

class

这并不是说

active

类在

navbar inverse

navbar-nav

内部，而不是

nav

。您需要理解CSS概念调用的特殊性。特异性为我们提供了一种将计算值分配给CSS选择器的方法。计算的基础如下：

如果元素具有内联样式，则自动获胜（1,0,0,0） 点数）对于每个ID值，对每个类别值应用0,1,0,0点 （或伪类或属性选择器），每个应用0,0,1,0点 元素参考，应用0,0,0,1点

最终，最高选择器值获胜，这就是应用的样式。要在您的案例中应用所需的样式，您需要确保选择器的计算值高于引导选择器的值。您的选择器可以工作，但选择器不必如下所示：

.navbar-inverse .navbar-nav .active a:hover{
  background-color:#2f2f2f;
}

在某些情况下，可以这样写：

#moreSpecific a:hover{
  background-color:#2f2f2f;
}

你可以在这个项目中看到它的作用

我还建议阅读这篇关于CSS技巧的文章。它更彻底，更深入地阐述了这个概念

#moreSpecific a:hover{
  background-color:#2f2f2f;
}