无法将CSS属性应用于导航栏元素

Question

我有一个引导程序演示，我已经构建了一个导航栏，但似乎无法将其组件作为CSS用途。

DEMO：https://www.bootply.com/HeDASKTqwt

我想定位所有菜单链接并更改其字体颜色。在CSS中我已经注释掉了font size属性，在应用时会更改所有链接的字体。这应该建议定位这些特定的HTML属性（ .navbar-default li）是正确的，但不知何故，颜色属性不适用。我已经在Chrome Devtools中分析了这种行为，并且字体颜色属性被打破了。我可以通过应用！important更改字体颜色但我倾向于再次遇到同样的问题并且过度使用Bootstrap框架这个属性，这显然不是一个好习惯。我已经尝试了不同的方法来定位导航栏元素，但到目前为止，我有一些特殊和不一致的结果。我似乎无法理解BS的这种定位行为。

我的登录链接也有问题。如果我更改所有菜单链接的字体大小，登录链接会在导航栏行中放错位置。我已经在HTML中将margin-top属性应用于Login链接，但我想避免手动调整它的值以适合所选的字体大小。有没有更好的方法如何使所有链接对齐不同的字体大小和屏幕分辨率？

Answer 1

要定位链接并更改颜色，您需要定位 <a>标记内的<li>标记，如下所示：

.navbar-default .navbar-nav li a {
  color:red;
}

单独定位<li>标记的原因不起作用是因为内部的<a>标记应用了默认颜色。此外，文本包含在<a> </a>标记内，而不是<li> </li>自我，如检查员所见。