- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我在我的 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/
是否可以在dashboardHeader旁边的水平栏中放置一些项目?我知道您可以像在this example中一样将notificationItem放在最右边。但是我想使用与dashboardSide
我有一个 UINavigationController,其中 Root View 不通过 显示顶部导航栏 [[self navigationController] setNavigationBarHi
我喜欢使用与苹果 iOS6 Appstore 顶部栏相同的色调。 但我无法找到正确的颜色。我尝试了很多颜色,但没有一个是正确的。 有人知道吗? 最佳答案 您可以通过将导航栏的色调设置为黑色来实现此目的
我知道我的问题可能有解决方案,但因为它是一个特定的代码,我决定发帖寻求帮助,所以让我们开始吧 我有一个顶部栏(如横幅)需要跟随滚动但它不会停留在一个位置并且不会移动我已经尝试过 position:fi
类似于http://m.huffpost.com/us顶栏 编辑:我正在尝试创建一个“响应式菜单”ICON(左对齐)和一些 TEXT 居中在顶部的栏中 我的尝试显然不起作用: Ce
我的网站上有一个#top 栏。它始终在顶部可见,并随着用户滚动而移动。它工作正常。现在,如果滚动条位置为 > 0,我想在 #top bar only 上显示阴影。如果用户转到顶部,它必须消失。 #to
我在我的 Rails 应用程序中使用 zurb foundation 并设置了我的顶部栏,如 http://foundation.zurb.com/docs/components/topbar.htm
它们实际上不在实际的 Zurb 站点上,不完整。 如果你去这里:http://foundation.zurb.com/docs/components/topbar.html ans 滚动到内置组件,您
我在向 Twitter Bootstrap 框架添加下拉菜单时遇到问题。添加下拉列表后,它会扩展整个顶部栏的高度,这就是我要修复的问题。 页面 URL 是 http://locabikes.de/ 如
已关闭。此问题需要 debugging details 。目前不接受答案。 编辑问题以包含 desired behavior, a specific problem or error, and the
我想在中小屏幕尺寸中显示菜单按钮并折叠顶部栏,而不仅仅是像默认行为那样以小尺寸显示。 我尝试了一些设置: $topbar-breakpoint: #{upper-bound($large-range)
刚开始用Expo学习React Native,尝试实现顶栏导航。 // screens/Home.tsx function Home() { return ( Home Sc
我有一个带有顶栏菜单的 php、jquery、foundation 电子商务网站,当文档准备就绪时,我执行 ajax 调用以获取顶部图像和菜单中每个类别的描述。 顶级图像不会每天发生变化,因此我可以将
我运行一个 MediaWiki 站点,该站点使用 Topbar extension 。我最近将安装从 MediaWiki 的主分支升级到了前沿版本:版本 1.28.0-alpha (91e56cc)。
我正在使用这个主题 http://demo.themeum.com/wordpress/educon/并且需要编辑红色顶部栏,使其看起来像图像 我试图在 Walker_Nav_Menu 类中对其进行编
我的网站上有一个粘性顶部栏。它在 Large 和 Medium 上工作正常,但当它变小时,它会发展出 54px 的高度。我将 class sticky-container 设置为 height: 0;
我希望能够单击顶部栏中的链接以显示不同的内容。我是否需要在顶部栏中的每个标签上明确使用数据切换器?这看起来很疯狂。有没有更简单的方法来实现我正在寻找的导航?类似于 uikit 的切换器?提前致谢,因为
我想要一个在非触摸设备上悬停并在触摸设备上点击的顶部栏。 我是这样实现的: 但是,必须有一种更简洁的方法来做到这一点,而无需将整个菜单重复两次,我已
大多数人都在谈论展开栏时的下拉菜单当您将浏览器窗口调整为手机大小时,我说的是菜单。你应该能够在菜单上并且项目列表应该下拉 http://foundation.zurb.com/docs/compone
我有这个(使用 Twitter Bootstrap css 表): BrandTest 它没有在顶部显示
我是一名优秀的程序员,十分优秀!