Can't seem to change color of link

Question

Here's a screenshot of the problem:

Notice that we're on the stalk page. The CSS I wrote is supposed to change the color of the active page. Here is the CSS:

#nav {
    border-top:10px solid #A7C1D1;
    height:45px;
    padding-left:100px;
    padding-top:20px;
    margin-left:0;
    color:#000;
}

  #nav a {
    color:#000;
    text-decoration:none;
  }

  #nav a:visited {
    color:#000;
  }

  #nav a:hover {
    color:#93AFBF;
  }

  #nav .active {
    color:#93AFBF;
  }

Before, I had the CSS for #nav .active to create a border around the active page. This worked and I could see the border around the word "stalk" when I was on the /stalk page. But this time around, I decided to just change the color of the word. This is where I ran into the issue.

Here is the HTML rendered for the page:

  <div id="nav"> 
    <a href="/">home</a> &middot; <a href="/stalk" class="active">stalk</a> &middot; <a href="#">link3</a> &middot; <a href="#">link4</a> 
  </div>

If I take away the CSS for #nav a:visited then the CSS for #nav .active works, but now the visited links are blue when I want them to stay black.

Answer 1

Use

#nav a.active {
    color:#93AFBF;
  }

The #nav a:visited has higher specificity ^{w3 specs} than #nav .active and thus gets applied.

Answer 2

Try

#nav a.active
{
   color: #93afbf
}

That should do it.