Wrong a:link tag being used (Chrome)

Question

I use two different a:link/a:visited/a:hover tags.. But the links in .panel take over the a:link/a:visited from .footer and only gets a:hover from .panel right.

HTML

<div class="panel" id="tab4"><b><a href="#" target="_blank">Title</a> – Name</b>

CSS

.panel a:link, a:visited {
color:#333;
text-decoration:none;}

.panel a:hover {
color:#000;
text-decoration:none;
border-bottom:1px solid #000;}

.footer a:link, a:visited {
color:#fff;
text-decoration:none;
opacity:0.8;
filter:alpha(opacity=80); /* For IE8 and earlier */}

.footer a:hover {
color:#fff;
text-decoration:none;
border-bottom:1px solid #fff;
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */}

Answer 1

CSS rules are a comma delimited list which are parsed by the browser right to left, top to bottom. When you do the following:

.panel a:link, a:visited{
    /*things*/
}

.footer a:link, a:visited {
    /*more things*/
}

The browser is saying:

"Ok, step one, for any anchor which is visited, do these rules. Then for any anchor link with a class of panel, do these same rules."

"On to step two, for any anchor which is visited, do these second rules {over writing your step one}, and for anything with the class of footer, do these second rules again."

So, make sure you have enough CSS specificity to correctly target what you're looking to target.

Answer 2

You declare a:visited twice, and the latter overwrites the values of the first.

.panel a:link, .panel a:visited {
    color:#333;
    text-decoration:none;
}

.footer a:link, .footer a:visited {
    color:#fff;
    text-decoration:none;
    opacity:0.8;
    filter:alpha(opacity=80); /* For IE8 and earlier */
}

This is probably what you are looking for. You can specify comma-delimited targets, but each one must by fully specified. Otherwise it would read like:

.footer a:link {
    <declarations>
}
a:visited {
    <declarations>
}