为什么我不能在 CSS 上更改 nav-link 颜色？

Question

1) 为什么我不能在 CSS 上更改 nav-link 颜色？

我正在尝试将菜单测试 (nav-link) 的颜色更改为白色，但它不起作用

和

2) 在每个 MENUTEST 的文本上方添加一行白线（就像 [u] 但在上面一样）如何做？

我做错了什么？

navbar.php

<header>
<nav class="navbar navbar-expand-sm navbar-light bg-faded fixed-top" style="background-color: #083F2C;">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<!-- Brand -->
<a class="navbar-brand" href="#"> <img src="img/logo.png" alt="" height="60" width="160"></a>

<!-- Links -->
<div class="collapse navbar-collapse" id="nav-content">
<ul class="navbar-nav">

<li class="nav-item">
<a class="nav-link" href="index.php">MENUTEST</a>
</li>

<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" id="Preview" href="#" role="button" aria-haspopup="true" aria-expanded="false">
MENUTEST
</a>
<div class="dropdown-menu" aria-labelledby="Preview">
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
</div>
</li>

<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" id="Preview" href="#" role="button" aria-haspopup="true" aria-expanded="false">
MENUTEST
</a>
<div class="dropdown-menu" aria-labelledby="Preview">
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
</div>
</li>

<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" id="Preview" href="#" role="button" aria-haspopup="true" aria-expanded="false">
MENUTEST
</a>
<div class="dropdown-menu" aria-labelledby="Preview">
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<!-- <a class="dropdown-item" href="#">Ana Tereza fala em São Paulo sobre o Direito de Regresso no Fomento Comercial</a> -->
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>

</div>
</li>

<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" id="Preview" href="#" role="button" aria-haspopup="true" aria-expanded="false">
MENUTEST
</a>
<div class="dropdown-menu" aria-labelledby="Preview">
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>

</div>
</li>

<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" id="Preview" href="#" role="button" aria-haspopup="true" aria-expanded="false">
MENUTEST
</a>
<div class="dropdown-menu" aria-labelledby="Preview">
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>

</div>
</li>

<li class="nav-item">
<a class="nav-link" href="#">MENUTEST</a>
</li>

</ul>
</div>
</nav>
</header>

和navbar.css

/* MENUTEST */
.nav-link a {
  font-color: white;
}

/* SUBMENUTEST */
.dropdown-menu {
  background: #EDEFF1;
  height: auto;
  width: auto;
  padding-left: 5px;
  border-bottom: 1px solid #CCCCCC;
  border-top: 1px solid #DDDDDD;
}

.dropdown-menu a {
  color: #78828D;
  font-size: 15px;
}

................................................ ..

Answer 1

font-color 不是 css 属性。您需要使用 color.

.nav-link a {
  // font-color: white;
  color: white;
 }

Answer 2

尝试比 class 更进一步，然后尝试 -> li, a, .nav-link 然后 css 你想要的任何东西。

我可以看到您正在使用 Bootstrap，所以它可能继承了一些东西。我总是用它来进入 Chrome 浏览器并右键单击我要更改的内容并单击 "inspect" 这将可以查看 css 背后的内容您想要更改的项目，然后您可以尝试在浏览器中对其进行编辑，如果可以，请复制该代码并插入您自己的 css 文件中。

希望对您有所帮助:)

Answer 3

`<div class="menuBar">
    <ul>
        <li class="selected"><a href="index.php">HOME</a></li>
        <li><a href="two.php">PORTFOLIO</a></li>
        ....
   </ul>
</div>

// specific CSS for your menu
div.menuBar li.selected a { color: #FF0000; } 
// more general CSS
li.selected a { color: #FF0000; }`

怎么样，你试过用li.selcted a{color:#FF0000;}.

为什么我不能在 CSS 上更改 nav-link 颜色？

Why i cant change nav-link color on CSS?

html

css

boost-random