Question

我在使用基础的CSS时在另一个样式表中将我自己的类添加到index.html，但是我的一些样式没有出现，例如：html中的class =“topNav”：

<header class="row topNav">
    <div class="large-12 columns">
        <h3>Logo Name</h3>
    </div>
</header>

标题中的样式：

<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" href="css/font.css" />

我想在css中实现的目标（更改标题的颜色）：

.topNav {background-color：＃000; } / 这不起作用 /

路径或文件结构没有任何问题。另外，我也使用基础4。

非常感谢您的帮助。

Answer 1

要覆盖基础css，将自定义css脚本放在基础css下。

<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="css/font.css" />

Answer 2

如果您需要暂时覆盖它，请添加!important规则：

.topNav {
background-color: #000 !important;
}

但是你应该发布相关的CSS，这样你就可以提出一个更具体的选择器作为使用!important的非常糟糕的做法，特别是如果你滥用它...它更好地弄清楚导致冲突的原因< / p>

Answer 3

对于那些可能遇到同样问题的人 - 我也是，直到我发现如果您将Foundation 4作为默认版本下载，您可以覆盖app.css就好了。但是你下载了自定义版本的Foundation 4，很多特殊组件如按钮都不会使用app.css覆盖foundation.css。它应该在某个地方的基金会文件中这样说 - 它会为每个人节省很多时间！

覆盖基础的问题

3 个答案: