css如何在导航栏中为当前页面设置不同的颜色？

Question

你好我是html&css的新手,我有一个问题.我做了一个导航栏,想通过更改导航栏中的背景颜色向用户显示他所在的页面.但由于某种原因,这种方法效果不佳.请帮我.

这是我用于导航栏的css代码:

#nav{
  width: 60%;
  display: inline-block;
  text-align: right;
  float: right;
}
/* unorded list */
#nav ul{}

#nav ul li{
  display: inline-block;
  height: 62px;
}
/* text in blokken */
#nav ul li a{
  padding: 20px;
  background: orange;
  color: white;
}

 #nav ul li a:hover{
  background-color: #ff1e42;
  box-shadow: 0px 1px 1px #666;
  text-decoration: underline;
 }
#nav ul li #inuse {
  background-color: #ff1e42;
}

我的HTML代码如下所示:

<div id="nav">
    <ul>
        <li><a class="inuse" href="../html/index.html" >Home</a></li>
        <li><a href="../html/kleding.html" >Kleding</a></li>
        <li><a href="../html/bestel.html" >Bestellen</a></li>
        <li><a href="../html/contact.html">Contact</a></li>
        <li><a href="../html/vragen.html" >Vragen</a></li>
    </ul>
</div>

提前致谢.

Answer 1

尝试:

#nav ul li a.inuse{/* in use css */}

代替:

#nav ul li #inuse{}

希望有所帮助