Rails Foundation 顶部栏活动项目突出显示答案

【问题标题】：Rails Foundation topbar active item highlightRails Foundation 顶部栏活动项目突出显示
【发布时间】：2014-01-21 17:52:17
【问题描述】：

我在我的 rails 应用程序中使用 zurb 基础，并设置了我的顶栏，如 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 的活动菜单项不会突出显示。

使用谷歌浏览器开发工具调试时，我发现正在应用的样式来自以下部分

.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 样式的优先级会发生变化。有什么建议吗？

【问题讨论】：

标签： css ruby-on-rails zurb-foundation

【解决方案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 */

【讨论】：