css - Rails Foundation topbar 事件元素突出显示

Question

我在我的 Rails 应用程序中使用 zurb foundation 并设置了我的顶部栏，如 http://foundation.zurb.com/docs/components/topbar.html 上的文档所示

这里是截断的代码:

<section class="top-bar-section">
  <ul class="right">        
    <li class="divider"></li>
    <li class="active"><a href="http://xyz.dev">Home</a></li>
    <li class="divider"></li>
  </ul>
</section>

但是，使用上面的代码，Home 的事件菜单项不会突出显示。

在使用 google chrome dev tools 调试时，我发现正在应用的样式来自以下部分

.top-bar-section li:not(.has-form) a:not(.button) {
  padding: 0 15px;
  line-height: 45px;
  background: #333333;
}

通常，要突出显示当前事件的链接，应使用以下代码:

.top-bar-section ul li.active > a {
  background: #008cba;
  color: white;
}

我不确定为什么 css 样式的优先级会发生变化。有什么建议吗？

Answer 1

第一条规则优先，因为它有更多 specificity比第二个。我建议使用与基础事件类相同的属性覆盖它，只需在您自己的样式表中使用更具体的选择器。您可以使用:

.top-bar-section ul.right li.active > a { /* 0, 0, 3, 3 */ 
    background: #008cba;
    color: white;
}

这允许上述选择器在使用 .active 时优先(无论顺序如何):

.top-bar-section li:not(.has-form) a:not(.button) /* 0, 0, 3, 2 */