html - Bootstrap 中的继承(如何知道我们需要自定义的特定类)

Question

我正在学习 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>

现在我一直在使用造型

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

我的问题是我们怎么知道 active 类在 navbar-inverse navbar-nav 里面？为什么不是 nav 类？

Answer 1

并不是说 active 类在 navbar-inverse navbar-nav 而不是 nav 里面。你需要了解一个 CSS 概念调用特异性。特异性为我们提供了一种将计算值分配给 CSS 选择器的方法。计算的基本内容如下:

If the element has inline styling, that automatically wins (1,0,0,0 points) For each ID value, apply 0,1,0,0 points For each class value (or pseudo-class or attribute selector), apply 0,0,1,0 points For each element reference, apply 0,0,0,1 point

最终，最高选择器值获胜，这就是应用的样式。要在您的案例中应用所需的样式，您需要确保您的选择器具有比 Bootstrap 的选择器更高的计算值。您的选择器有效，尽管选择器不必必须像下面这样:

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

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

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

您可以在这个 codeply 中看到它的实际效果元素。

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