gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 11:28:20 27 4
gpt4 key购买 nike

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

最佳答案

第一条规则优先,因为它有更多 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 */

关于css - Rails Foundation topbar 事件元素突出显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21265568/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com