CSS :active ψευδοκλάση

καθορισμός και χρήση

CSS :active ψευδείς κλάσεις χρησιμοποιούνται για να επιλέξουν και να ρυθμίσουν το στυλ των στοιχείων που ενεργοποιούνται από τον χρήστη.

:active ψευδείς κλάσεις χρησιμοποιούνται συχνά <a> και <button> στοιχεία. Όταν ο χρήστης κάνει κλικ στον σύνδεσμο, ο σύνδεσμος ενεργοποιείται; Το ίδιο και με τα κουμπιά.

συμβουλή:χρήση :link ρυθμίστε το στυλ του σύνδεσμου για τη σελίδα που δεν έχει επισκεφθεί, χρησιμοποιώντας :visited ρυθμίστε το στυλ του σύνδεσμου για τη σελίδα που έχει επισκεφθεί, χρησιμοποιώντας :hover ρυθμίστε το στυλ του σύνδεσμου όταν αναπαράγεται από το ποντίκι.

σημείωση:στοιχεία CSS:active πρέπει να τοποθετηθεί :hoverμετά από (αν υπάρχει) μπορεί να εφαρμοστεί!

παράδειγμα

παράδειγμα 1

επιλογή και ρύθμιση των στυλ για τον ενεργοποιημένο σύνδεσμο:

a:active {
  χρώμα περιβάλλοντος: κίτρινο;
}

δοκιμάστε το προσωπικά

παράδειγμα 2

επιλογή και ρύθμιση των στυλ για το στοιχείο <button> όταν πατηθεί από τον χρήστη:

button:active {
  χρώμα περιβάλλοντος: ροζ;
}

δοκιμάστε το προσωπικά

παράδειγμα 3

επιλογή και ρύθμιση των στυλ για τους στοιχεία <p>, <h1> και <a> όταν πατηθούν:

p:active, h1:active, a:active {
  χρώμα περιβάλλοντος: κίτρινο;
}

δοκιμάστε το προσωπικά

παράδειγμα 4

επιλογή και ρύθμιση των στυλ για τους σύνδεσμους που δεν έχουν επισκεφθεί, που έχουν επισκεφθεί, που αναπαράγονται από το ποντίκι και που ενεργοποιούνται:

/* ο σύνδεσμος που δεν έχει επισκεφθεί */
a:link {
  χρώμα: πράσινο;
}
/* ο σύνδεσμος που έχει επισκεφθεί */
a:visited {
  χρώμα: πράσινο;
}
/* ο σύνδεσμος που αναπαράγεται από το ποντίκι */
a:hover {
  χρώμα: κόκκινο;
}
/* ο σύνδεσμος που ενεργοποιείται */
a:active {
  χρώμα: κίτρινο;
}

δοκιμάστε το προσωπικά

παράδειγμα 5

υπολογισμός διαφορετικών στυλ για τους σύνδεσμους:

a.ex1:hover, a.ex1:active {
  χρώμα: κόκκινο;
}
a.ex2:hover, a.ex2:active {
  font-size: 150%;
}

δοκιμάστε το προσωπικά

σύνταξη CSS

:active {
  θέσεις css;
}

τεχνικά λεπτομέρειες

Υποστήριξη προγράμματος περιήγησης

Τα αριθμήματα στη τράπεζα καθορίζουν την πρώτη έκδοση του προγράμματος περιήγησης που υποστηρίζει πλήρως αυτήν την ψευδής κλάση.

σχετικές σελίδες

Εκμάθηση:CSS σύνδεσμοι

Εκμάθηση:CSS κουμπί

Εκμάθηση:CSS ψευδής κλάσεις