Perché fa .foo a: link, .foo a: visited {} selettore sovrascrive a: hover, a: selettore {} attivo in CSS?

Codice

Esempio: http://jsfiddle.net/RuQNP/Perché fa .foo a: link, .foo a: visited {} selettore sovrascrive a: hover, a: selettore {} attivo in CSS?

<!DOCTYPE html> 
<html> 
<head> 
    <title>Foo</title> 
    <style type="text/css"> 
     a:link, a:visited { 
      color: blue; 
     } 

     a:hover, a:active { 
      color: red; 
     } 

     .foo a:link, .foo a:visited { 
      color: green; 
     } 

     /* A possible fix */ 
     /* 
     .foo a:hover, .foo a:active { 
      color: red; 
     } 
     */ 
    </style> 
</head> 
<body> 
    <div class="foo"> 
     <a href="http://example.com/">Example</a> 
    </div> 
</body> 
</html>

quello che mi aspettavo:

Il collegamento apparirebbe rosso al passaggio del mouse.

cosa ottengo:

Il collegamento appare verde al passaggio del mouse.

Domande:

Perché il color definito .foo a:link, .foo a:visited selettore di Override quello in a:hover, a:active? Cosa sta succedendo?
Capisco che posso risolvere il problema e ottenere quello che mi aspetto da decommentare il codice commentato. Tuttavia, desidero sapere in che modo è possibile correggere il selettore in modo che non sia sovrascrivere lo color definito in a:hover, a:active?

Se ho capito correttamente http://www.w3.org/TR/CSS21/cascade.html#specificity (Grazie, BoltClock), questa è la tabella di specificità per i vari selettori nel codice.

a:link   - 0 0 1 1 
a:visited  - 0 0 1 1 
a:hover  - 0 0 1 1 
a:active  - 0 0 1 1 
.foo a:link - 0 0 2 1 
.foo a:visited - 0 0 2 1

Così, lo stile definito per .foo a:link prevale lo stile per a:hover quando entrambi link così come hover pseudo-classi si applicano a un elemento A di classe foo.

Analogamente, lo stile definito per .foo a:visited sostituisce lo stile per a:hover quando entrambi visited nonché hover pseudo-classi applicano a un elemento A di classe foo.

fonte

2011-09-10 Susam Pal

selettori avere il concetto di * specificità *, il che significa che una "più specifica" il selezionatore supererà uno più generale (es 'html a.foo' trionferà' .foo'). Google o cerca qui su SO, ci sono un sacco di domande simili. – Jon

possibile duplicato di [CSS: Comprensione della priorità/specificità del selettore] (http://stackoverflow.com/questions/4072365/css-understanding-the-selectors-priority-specificity) – Jon

Sì, ma lo stile più specifico non si applica a a: al passaggio del mouse, quindi la domanda. –

quando hai iniziato con i CSS, si potrebbe avere imparato a conoscere il mnemonico di amore-odio per l'ordine in cui specificare link di selettori (a:link, a:visited, a:hover, a:active). Ti sei mai chiesto perché è stato scelto questo mnemonico?

Beh, c'è una nota nel spec su come vengono trattati sul link e pseudo-classi dinamiche quando più regole utilizzando tutti loro si applicano allo stesso elemento, il che spiega il motivo per cui è necessario impostare i selettori di link in questo ordine:

Si noti che l'A: hover deve essere posizionato dopo le regole A: link e A: visited, poiché altrimenti le regole a cascata nasconderanno la proprietà 'color' della regola A: hover. Analogamente, poiché A: attivo è posizionato dopo A: hover, il colore attivo (calce) si applica quando l'utente si attiva e passa con il mouse sopra l'elemento A.

In ogni caso, il punto che sto cercando di fare sopra è che tutte e quattro le pseudo-classi, essendo pseudo-classi, hanno uguale specificità. Tutto il resto sulla specificità si applica.In questo caso, su un gruppo di selettori ugualmente specifici, viene applicata l'ultima regola. Quando o come ogni pseudo-classe è attivata non è mai rilevante.

Ora, la semplice introduzione del selettore .foo fa sì che il secondo gruppo di link/visitato regole per ignorare il primo set di collegamento/stili visitati e gli stili hover/attivo, costringendo i collegamenti negli elementi con quella classe di sempre appare verde fino a quando non si aggiunge hover/stili attivi con il selettore .foo.

^{Scusate se la mia risposta sembra cucita-up o slipshod a proposito, sto scrivendo questo sul mio iPhone in questo momento ed è abbastanza difficile pensare qui fuori ...}

fonte

2011-09-10 12:59:36 BoltClock

Ma ho scoperto che lo spostamento del selettore '.foo a: link, .foo a: visited' prima che il selettore' a: hover, a: active' non risolva il problema. Ecco un esempio: http://jsfiddle.net/eSc56/ Anche in questo il colore specificato nel selettore '.foo a: link, .foo a: visited' sovrascrive quello in' a: hover, a: active'. –

@Susam Pal: il selettore di classe lo rende più specifico, quindi, ovunque tu inserisca la regola, continuerà a ignorare tutte le altre regole. – BoltClock

Quindi, si intende '.class .element: pseudoclass' sovrascrive' .element: another-pseudoclass'? Se è così, l'output ha senso. Sto cercando di trovare ciò che nello standard CSS implica questo, ma non sono ancora riuscito a trovarlo. –

Per risolvere esso, mettere il selettore .foo ... prima e aggiungere !important al valore del colore per l'altro collegamento/selettore visitato, in questo modo:

a:link, a:visited { 
     color: blue; 
    } 

    a:hover, a:active { 
     color: red !important; 
    } 
    .foo a:link, .foo a:visited { 
     color: green; 
    }

la ragione per cui il selettore .foo a:link, .foo a:visited sovrascrive l'altro di selezione non importa dove lo metti, perché .foo a:link è più specifico di a:link. (idem per :visited.) Quindi il selettore .foo ... sostituirà sempre il selettore a:link,a:visited perché ha un nome di classe padre, quindi è più specifico.
(leggi anche la risposta di @ BoltClock su LoVe - HAte - fa parte del problema.)

fonte

2011-09-10 13:17:27 Abraham

La tua soluzione non funziona. –

@Susam: Siamo spiacenti. Aggiungi '! Important' dopo il valore del colore per la regola hover/attiva. (Demo: http: //jsfiddle.net/EdYPU/) – Abraham

Il '!importante 'deve entrare solo nella regola HA, non nella regola LV. Altrimenti non c'è molto di un punto che abbia la regola .foo LV in tutto :) – BoltClock

Ecco come lo capisco. Tutte queste pseudo classi hanno la stessa specificità, quindi la pseudo-classe scritta alla fine vince. Ora cosa fanno le pseudo-classi :link, :visited, :focus, :hover, :active? Vediamoli uno per uno.

a: link{color: red} indica all'agente utente di colorare l'elemento di ancoraggio in rosso in in qualsiasi stato. Eseguire il seguente script:

a:link { 
 
    color: red; 
 
    
 
    }

<a href="www.stackoverflow.com">Go to stackoverflow </a>

L'elemento di ancoraggio è colorato in rosso nei seguenti stati se e solo se il collegamento è non visitato,

Unvisited
aleggiava
Messa a fuoco (scheda)
attivo (Scattato)

Quindi, a: link{color: red} dice al programma utente per dare colore rosso per ancorare elemento in tutti gli stati di cui sopra. Ora confrontiamolo con la pseudo-classe a:hover.Eseguire il seguente script

a:hover { 
 
    color: red; 
 
    
 
}

<a href="www.stackoverflow.com">Go to stackoverflow </a>

L'elemento di ancoraggio è colorato in rosso nei seguenti stati,

aleggiava
attivo (cliccato)

Vediamo che siaLe pseudo classi 210 e :hover sono in grado di definire lo stato hover - Quindi se assegni queste due pseudo-classi a un particolare elemento, vince quello menzionato per ultimo nel file css. Questa è la ragione per cui diciamo che :link sostituirà :hover quando il primo è menzionato in seguito. Lo stesso concetto vale per altre pseudo-classi. Mi piacerebbe dare una lista di ciò che ogni pseudo classe fa.

a:link {...} imposta i seguenti stati di un collegamento non visitato
- Focused (a schede)
- aleggiava
- Attivo (Scattato)

link stato sarà ignorare ogni altro stato.

a:visited {...} imposta i seguenti stati di un link visitato:
- Focused (a schede)
- aleggiava
- Attivo (Scattato)

a:visited {...} ignorerà ogni altro stato, tranne :linkse e solo se il collegamento è stato visitato.

Si noti che visitato significa che deve essere considerato visitato in base alla cache dell'agente utente. Per esempio. un sito web visitato 10 giorni fa potrebbe non essere nella cache dell'agente utente, quindi sarebbe tecnicamente considerato non visitato.

a:focus {...} imposta i seguenti stati per entrambi i collegamenti visitati e non visitati:
- Focused (a schede)
- aleggiava
- Attivo (Scattato)

a:focus {...} sovrascrive :hover e :active stati.

a:hover {...} definisce i seguenti stati per entrambi i collegamenti visitati e non visitati:
- aleggiava
- Attivo (Scattato)

a:hover {...} sovrascrive :active statali

a:active {...} imposta i seguenti stati per entrambi i collegamenti visitati e non visitati:

attivo (cliccato)

fonte

2016-03-04 15:05:49 user31782

Per coloro che hanno difficoltà a ricordare il corretto ordinamento delle pseudo classi relative al tag 'a' in un foglio di stile è - ** L ** o ** V ** e prima ** HA ** te. 'Link' ->' Visited' -> 'Hover' ->' Active' – RBT

Perché fa .foo a: link, .foo a: visited {} selettore sovrascrive a: hover, a: selettore {} attivo in CSS?

risposta

Problemi correlati