我正在学习 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
类?
最佳答案
并不是说 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 技巧。它更彻底,更深入地介绍了这个概念。
关于html - Bootstrap 中的继承(如何知道我们需要自定义的特定类),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47544772/