Confuso dalla pseudo-classe CSS: attivo

Stavo cercando here al CSS: Selettore attivo.Confuso dalla pseudo-classe CSS: attivo

I: stili di selettori attivi collegamenti alle pagine attive

Questo mi ha fatto pensare, cosa diavolo è un 'pagina attiva' nella terminologia HTML/CSS ...

A questo punto sono passato alla sezione w3docs: 5.11.3 Le pseudo-classi dinamiche:: hover,: active, e: focus.

L': attivo pseudo-classe si applica mentre un elemento viene attivato dall'utente . Ad esempio, tra i tempi l'utente preme il pulsante del mouse e lo lo rilascia.

così ho usato uno dei w3shools try it pages e metter su un esempio, sostituendo il codice seguente, che si può solo tagliare & pasta e provare.

<html> 
<head> 
<style type="text/css"> 
:focus,:active 
{ 
outline-offset: 10px; 
outline: solid; 
} 
</style> 
</head> 

<body> 
<p>Click the links to see the background color become yellow:</p> 
<a href="http://www.w3schools.com">w3schools.com</a> 
<a href="http://www.wikipedia.org">wikipedia.org</a> 
<button type="button">Click Me!</button> 
<form> 
<input type="text"/> 
</form> 
</body> 
</html>

Il campo modulo funziona per: messa a fuoco. Ma il pulsante o i collegamenti non funzionano per: attivo.

Perché è quello? C'è qualcosa nella 'pagina attiva'? Non capisco che w3schools abbia parlato.

Ho visto questo nice tip quando ho cercato su Google, ma non penso che sia correlato.

fonte

2011-02-18 JGFMK

Non esiste il concetto di "pagina attiva" in CSS. In realtà, il SitePoint Reference sfata questo dicendo:

La pseudo-classe non non significare un collegamento al attiva, o corrente, la pagina-questo è un errore comune tra i principianti CSS.

Che le specifiche dice è giusto: :active semplicemente stili elementi che vengono attivati , per esempio cliccato (come nell'esempio fornito) o in qualche altro modo attivato in modo che il browser inizi a navigare verso la destinazione del collegamento.

Nota che non si applica solo agli elementi <a>; può essere applicato a qualsiasi elemento di input non formattato su cui è stato fatto clic. Ad esempio, puoi fare ciò:

p:active { 
    color: red; 
}

E qualsiasi paragrafo che fai clic lampeggerà il suo testo in rosso.

Nota tuttavia che la definizione e l'attuazione precisa è lasciata al browser, ma in generale , si può contare su <a> elementi aventi uno stato attivato.

fonte

2011-02-18 18:56:38 BoltClock

:active è lo stile assegnato a un elemento (a o un pulsante, ad esempio) quando il mouse viene tenuto premuto su di esso.Potresti averlo visto su alcuni siti quando fai clic su un pulsante in stile; quando si effettivamente fare clic sul pulsante, potrebbe cambiare. Questa è la pseudo-classe :active.

fonte

2011-02-18 18:58:18 Bojangles

L'ho capito già. E 'stata la falsa pagina della cosa attiva che W3schools ha inventato e che mi ha gettato. Già trattato sopra da @zzzBov & @ BoltClock – JGFMK

Ho sempre utilizzato :active per i collegamenti. La frazione di secondo prima che il browser vi porta alla pagina che hai appena cliccato, il testo sarebbe cambiare il colore chiamato a a:active{ ... }

Esempio:

a:active { color:pink; font-weight:bold; }

maggior parte dei browser supportano, ma non è davvero la pena il tuo tempo per modellarlo Indietro nel giorno di 56k dial up è stata una bella cosa dover mostrare visivamente che il link su cui l'utente ha fatto clic veniva caricato.

fonte

2011-02-18 19:00:16 AJMaxwell

Confuso dalla pseudo-classe CSS: attivo

risposta

Problemi correlati