css - 基础顶栏导航样式

Question

如何覆盖顶部栏、导航栏等的默认样式？

PS：我阅读了关于顶栏的 Foundation Docs，并且我有 2 个使用 SASS，但我不知道该怎么做。

谢谢！

Answer 1

我创建了一个 .app 样式表并将其作为外部样式表附加。在样式表中，我创建了，

.top-bar {

background: whatever color;

}

.top-bar-section li a:not(.button)
{
background: whatever color;
}

我仍在学习 Foundation 以及如何操作元素。我会使用 Google Chrome 中的检查工具来确定要添加到样式表中的元素。

Answer 2

SASS 版本带有一个设置文件（_settings.scss或_settings.sass），您可以在其中配置整个 Foundation 库的颜色和断点。

顶部栏元素位于文件的底部。只需取消注释并更改要更改的变量所在的行。

Answer 3

在您的自定义 css 文件中尝试此操作::

.top-bar-section li a:not(.button) {
    background:black;
    color: white;
    }

.top-bar-section li a:not(.button):hover {
    background:red;
    color: white;
    }