Can't seem to change color of link

Here's a screenshot of the problem:

Notice that we're on the stal开发者_JAVA百科k 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.

Use

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

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

Try

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

That should do it.

try:

#nav a:link {color: #000;}
#nav a:visited {color: #000;}
#nav a:hover {color: #93afbf;}
#nav a:active {color: #93afbf;}

You are confusing the active pseudo class

Site Point Refrence

This pseudo-class matches any element that’s in the process of being activated. It would apply, for instance, for the duration of a mouse-click on a link, from the point at which the mouse button’s pressed down until the point at which it’s released again. The pseudo-class does not signify a link to the active, or current, page—that’s a common misconception among CSS beginners.

Similar Problem

Border property is not inherited while color property it is. So you inherit the color property for your link from the #nav, while the border property was the one declared in the "active" class rules. You should declare the color property for the link with the "active" class as suggested by Gaby

Tonight I found an unusual one. (A link color that I couldn't change.) I went into the inspector and first found the text-decoration-color property set. But no, that would be too easy. I scroll down to color and find this :not selector, which a theme author created. In my specific case, the solution was to duplicate (overwrite) this weird selector with the color I wanted:

#the-post .entry-content a:not(.shortc-button) { color: white !important; }

My suggestion is to go into your inspector (F12) and find the "Computed" tab and look where the colors are coming from. Usually it's straightforward where the color is coming from, and the inspector will even tell you which file and which line number set the color. Then the decision is, do you have access/permission to that file? Or maybe you have access, but do you necessarily want access to that file?

If you want to avoid changing the source of the color, for whatever reason, you can just re-declare the color again further down the page, like in your footer, or immediately after the theme is loaded, whatever the case may be. Of course given the option, it's usually preferable to find the root of the problem and then you end up using less CSS code which loads faster and is easier to maintain.