Sbagliato A: Tag del collegamento utilizzato (Chrome)

Question

Uso due diversi A: link/a: visitato/a: tag hover .. ma i collegamenti in .panel prendono il sopravvento sul: link/a: visitato da .footer e ottiene solo un: hover da .panel a destra.

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

Le regole CSS sono un elenco delimitato da virgola che viene analizzato dal browser da destra a sinistra, dall'alto verso il basso. Quando fai quanto segue:

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

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

Il browser sta dicendo:

"OK, primo passo, per qualsiasi anchor che è visited, fai queste regole. Quindi per qualsiasi anchor link con una classe di panel, fai queste stesse regole. "

"Su al secondo passo, per qualsiasi anchor che è visited, fai queste seconde regole {soprattutto scrivendo il tuo passaggio} e per qualsiasi cosa con il class di footer, fare di nuovo queste seconde regole. "

Quindi, assicurati di averne abbastanza Specificità CSS Per colpire correttamente ciò che stai cercando di target.

Answer 2

Dichiari a:visited Due volte, e quest'ultimo sovrascrive i valori del primo.

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

Questo è probabilmente quello che stai cercando. È possibile specificare obiettivi paralizzati da virgola, ma ognuno deve essere completamente specificato. Altrimenti leggi come:

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