My Navigation Bar CSS is overwriting my other link

问题:

The way I have styled my navigation bar follows as:

nav a:link,a:visited {
    display:block;
    width: 125px;
    color:#000000;
    background-color:#FFFFFF;
    text-decoration:none;
    font-family: Arial,Helvetica,sans-serif;
    font-variant:small-caps;
    padding: 5px;
    font-size: 18px;
}

The rest of my links are styled as this:

footer a:link {
    color:#7A7A7A;
}

footer a:visited {
    color:#7A7A7A;
} 

footer a:hover {
    color:#383838;
}   

footer a:active {
    color:#000000;
} 

The problem is that Opera cannot recognize the #nav or #footer before the a:link,a:visited and as such, every link on my page looks like the navigation bar in Opera. Can anyone think of a fix for this?

HTML

<ul id="nav">
    <li>
        <a href="#home">Home</a>
    </li>

    <li>
        <a href="#news">About Us</a>
    </li>

    <li>
        <a href="#contact">Portfolio</a>
    </li>

    <li>
        <a href="#about">Services</a>
    </li>

    <li>
        <a href="#about">Contact Us</a>
    </li>
</ul>

And this is the HTML that is being overwritten:

<div id="footer">
    Copyright 2013, <a href="http:">Link 1 </a> and <a href="http:">Link 2 </a>
</div>

回答1:

Your second selector for the navigation links isn't quite correct, should be:

nav a:link,
nav a:visited {
    // styles
}

instead of just nav a:link, a:visited, like this the styles get applied to each visited anchor.

Also like mentioned in other answers, since you've posted your HTML, you must select indexed (id) elements with #nav or #footer.

回答2:

You're trying to target an ID, your CSS selectors should be #nav and #footer

e.g.

#footer {
  blah
}
#nav {
  blah
}

回答3:

As mentioned in Simons answer, it is the second selector that's need nav added like nav a:visited instead of a:visited.

Here is a working example (tested in Opera 12 and Chrome 26 on Win7)

Also a changed from nav to #nav (same for footer) to get it to work with your html