基础5导航栏标题颜色变化

Question

我试图更改标题的默认颜色，此刻为白色。

<nav class = "top-bar" data-topbar>
    <ul class = "title-area">
        <li class = "name">
            <h1><%= link_to "CF logo", root_path, class: "home"%></h1>
        </li>
    </ul>
</nav>

我试着打电话

.name h1{
    color:red;
}

和

.title-area .name h1{
    color:red;
}

甚至

.home{
    font-size: 1.5em;
    font-color: red;
}

但它们都不起作用。我该怎么办？

Answer 1

如果您的标题位于锚标记<a>内 - 您需要这样的内容：

.top-bar .name a { color: #9dcf81; }

在Chrome内部，检查元素后，单击鼠标突出显示标题后，查找加号。如果颜色不粘，请考虑使用!important属性。

P.S。 - 请为您的网站提供URL缩短服务（如果您担心隐私）的链接。

Answer 2

是否使用CSS规则取决于选择器的特异性。有关如何计算CSS选择器的特异性，请参阅the MDN for details。

如果你想看看哪个CSS语句覆盖了你的那个（可能是你正在使用的Foundation CSS库中指定的样式之一），那么我会推荐一个像firebug或chrome开发工具这样的工具来让你检查一个元素，看看哪些规则被考虑在内，哪些规则被更具体的选择者覆盖。

您也可以在选择器中使用important!来覆盖特异性，但请谨慎使用。例如： -

.name h1 {
    color:red !important;
}