css - 如何更改导航栏 (CSS) 上的颜色

Question

这让我发疯了。我已经尝试了有关此问题的其他问题中的所有建议，但它不起作用。

我需要更改导航栏的背景颜色。我不想更改编辑器部分（Wordpress）中的 CSS。我一直在尝试在 Edit CSS 部分完成它。

#nav {
    position: relative;
    left: -90px;
}

nav > ul {margin: 40}

这就是我到目前为止所拥有的（它一直在工作，它以我想要的导航栏为中心，并在标题和导航栏之间放置了一个边距）。我可以添加什么来改变背景的颜色（然后我也需要改变字体的颜色..）

Answer 1

嗯，你的意思是这样吗？

CSS：

#nav {
    position: relative;
    left: -90px;
    background-color: #7777777; /*Whatever color you want goes here, but in Hexadecimal form*/
}

并且，对于字体颜色：

#nav {
    position: relative;
    left: -90px;
    background-color: #7777777; /*Whatever color you want goes here, but in Hexadecimal form*/
    color: #1122cc; /*The color of your font also goes here, but in hexadecimal form*/
}

请参阅以下链接以获取更多参考：

http://www.w3schools.com/cssref/pr_background-color.asp http://www.w3schools.com/cssref/pr_text_color.asp

颜色：

http://www.w3schools.com/cssref/css_colors.asp http://www.w3schools.com/cssref/css_colornames.asp

Answer 2

对于这个 HTML（我复制了每个导航项来表示添加的“活动”类）

<nav>
  <ul>
    <li class="blue"><a href="#">Normal</a></li>
    <li class="green"><a href="#">Normal</a></li>
    <li class="red"><a href="#">Normal</a></li>
    <li class="blue active"><a href="#">Active</a></li>
    <li class="green active"><a href="#">Active</a></li>
    <li class="red active"><a href="#">Active</a></li>
  </ul>
</nav>

我会使用这个 CSS（注意链接在一起的 CSS 类，例如：.blue.active）

Answer 3

这是一种改变颜色的方法。您还可以使用图像或 css 来使用渐变。

#nav {
    position: relative;
    left: -90px;
background-color: #336699; // change #000088 (blue) for the color your want
color: #FFFFFF; // change #FFFFFF (white) for the color you want.

}

您可以使用颜色选择器来获得所需的颜色。