html - 如何更改导航丸和导航栏的样式？

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 元素的样式与页面顶部的导航栏不同。我尝试使用导航丸，但似乎无法修改 li 元素，它们遵循导航栏样式。我似乎只有在添加额外的 !important 语句时才会更改任何内容。

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

我的具体问题是nav、navbar 和nav-pills 的层级依赖是什么，这样我就可以改变样式他们每个人分开？有人有指针吗？ !important 的作用是什么？它会覆盖，但如果我在我的 css 文件中指定 nav-pills 为什么我需要它？

同时使用 navbar 作为页脚是否是“最佳实践”？在我阅读的文档中，它似乎表明主要用于 header 中。

任何指点将不胜感激!

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*/
}

您希望类在页脚中继承的样式您将它们保持原样 :)

是的，您可以在页脚中使用导航栏:)