Question

1）为什么我无法更改CSS上的导航链接颜色？

我正在尝试将MENUTEST（导航链接）的颜色更改为白色，但它不起作用

和

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

尝试并采取比课堂更进一步的尝试 - ＆gt; li，a，.nav-link，然后是你想要的任何css。

我可以看到你正在使用Bootstrap，所以它可能会继承一些东西。我总是使用它来访问Chrome浏览器并右键单击我要更改的内容，然后单击＆＃34;检查＆＃34;这样就可以看到你要改变的项目后面有什么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上的导航链接颜色？

3 个答案: