Question

按下导航栏中的链接时，我试图更改背景颜色和文本颜色。

我使用了.currentLink样式，但仍不适用于当前链接。我确定我缺少一些简单的东西，但似乎无法在我的编码书或在线教程中找到任何帮助。

这是我到目前为止在CSS样式表中拥有的内容，但仍无法正常工作：

CSS：

nav ul {
    display: flex;
    flex-direction: row;
    margin: 0;
    padding: 0;
}

nav ul.vertical {
    flex-direction: column;
}

nav ul.horizontal > li {
    flex-direction: row;
    background-color: #1177d1;
}

nav ul.horizontal > li > a {
    flex-direction: row;
    color: #ffffff;
}

nav ul li {
    flex: 1 1 auto;
    list-style-type: none;
}

nav ul li a {
    text-decoration: none;
}

.currentLink {
   color: #aa0000;
   background-color: #007700;
}

HTML：

<nav>
  <ul class="horizontal">
    <li><a href="home_page.html">Home</a></li>
    <li><a href="test_page.html">Services</a></li>
    <li><a href="photo_page.html">Photos</a></li>
    <li><a href="gallery.html">Gallery</a></li>
    <li><a href="contact_page.html">Contact Us</a></li>
  </ul>

Answer 1

使用此代码

nav ul.horizontal > li:active{
     
   background-color: #007700;
}
nav ul.horizontal > li > a:active {
   color: #aa0000;
}

   nav ul {
    display: flex;
    flex-direction: row;
    margin: 0;
    padding: 0;
}

nav ul.vertical {
    flex-direction: column;
}

nav ul.horizontal > li {
    flex-direction: row;
    background-color: #1177d1;
}

nav ul.horizontal > li > a {
    flex-direction: row;
    color: #ffffff;
}

nav ul li {
    flex: 1 1 auto;
    list-style-type: none;
}

nav ul li a {
    text-decoration: none;
}


nav ul.horizontal > li:active{
     
   background-color: #007700;
}
nav ul.horizontal > li > a:active {
   color: #aa0000;
}

   <nav>
  <ul class="horizontal">
    <li><a href="home_page.html">Home</a></li>
    <li><a href="test_page.html">Services</a></li>
    <li><a href="photo_page.html">Photos</a></li>
    <li><a href="gallery.html">Gallery</a></li>
    <li><a href="contact_page.html">Contact Us</a></li>
  </ul>
  </nav>

Answer 2

如果您使用的是Bootstrap之类的框架或类似框架，则可能是踩了样式，在这种情况下，您可以在CSS中使用！important 来踩踏样式框架：

nav ul.horizontal > li > a:active {
    color: #aa0000 !important;
}

尝试更改当前链接的背景颜色和文本颜色

2 个答案: