Incorrecto a: etiqueta de enlace que se usa (Chrome)

Question

Utilizo dos A diferentes A: Link/A: Visited/A: Hover Etiquetas ... pero los enlaces en .Panel se hacen cargo de A: Link/A: Visitado desde .footer y solo obtiene A: Hover de .Panel Derecho.

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

Las reglas de CSS son una lista delimitada de coma que el navegador analiza de derecha a izquierda, de arriba a abajo. Cuando haces lo siguiente:

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

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

El navegador dice:

"Ok, paso uno, para cualquier anchor cual es visited, haz estas reglas. Entonces para cualquier anchor link con una clase de panel, haz estas mismas reglas ".

"En el paso dos, para cualquier anchor cual es visited, haga estas segundas reglas {sobre escribir su paso uno}, y para cualquier cosa con el class de footer, haz estas segundas reglas nuevamente ".

Entonces, asegúrate de tener suficiente Especificidad CSS Para apuntar correctamente a lo que está buscando apuntar.

Answer 2

Tu declaras a:visited Dos veces, y este último sobrescribe los valores del primero.

.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 */
}

Esto es probablemente lo que estás buscando. Puede especificar objetivos delimitados por comas, pero cada uno debe especificarse por completo. De lo contrario, se leería como:

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