Question

我正在开发一个网站的前端，我对Ruby和Rails，css和bootstrap很新。根据文档，我在页面顶部有一个非常好的导航栏，通过更改css文件中的选项来满足我的需求。

.navbar {
  background-color: #3a2665;
  color: #ffffff !important;
}

.navbar .nav {
  padding-top: 15px;
  padding-bottom: 15px;
}

.navbar .nav > li > a {
  color: #ffffff !important;
  font-family: 'Oswald', sans-serif;
  font-size: 1.5em;
}

我还需要一个带有导航选项的页脚，这次使用 li 元素，其格式与页面顶部的导航栏不同。我尝试使用nav-pills但似乎无法修改 li 元素，它们遵循导航栏样式。当我抛出额外的！important 语句时，我似乎只会改变任何事情。

.nav-pills > li > a {
  color: #ffffff;
  font-family: 'Open Sans', sans-serif !important;
  font-size: 0.8em ;
  padding: 1px 1px 1px ;
}

我的具体问题是导航，导航栏和导航丸的等级依赖性，以便我可以改变他们每个人分开？有人有指针吗？ ！important 的作用是什么？它会覆盖，但如果我在我的css文件中指定 nav-pills ，为什么还需要它？

使用导航栏作为页脚也是“最佳做法”吗？在我阅读的文档中，似乎表明主要用于标题中。

任何指针都将非常感激！

Answer 1

你可以这样做，所以你不必使用！important来覆盖css风格

.navbar {
  background-color: #3a2665;
  color: #ffffff;
}

.navbar .nav {
  padding-top: 15px;
  padding-bottom: 15px;
}

.navbar .nav > li > a {
  color: #ffffff;
  font-family: 'Oswald', sans-serif;
  font-size: 1.5em;
}

footer .navbar{
    color: #ff0000; /* TO change the color in the footer*/
}
footer .navbar .nav > li > a {
  color: #ff0000; /* TO change the color in the footer*/
}

您希望类在页脚中继承的样式，您将它们保留原样：）

是的，您可以在页脚中使用导航栏：）

Answer 2

我的第一个建议是检查SASS的重新设计引导程序，因为它提供了许多更改颜色，字体等的简单替代方法。

但是要回答你的问题，你应该使用这种层次结构：

.navbar .nav-pills > li > a

这是一篇关于理解的好文章！重要的CSS声明

（http://www.smashingmagazine.com/2010/11/02/the-important-css-declaration-how-and-when-to-use-it/）

创建页脚时，我通常的做法是创建一个背景div / footer＆gt;容器＆gt;然后列＆gt;内容如水平ul列表等。

如何改变导航丸和导航栏的风格？

2 个答案: