Επιλογείς ενσωμάτωσης CSS (&)
- Προηγούμενη σελίδα [attribute*=value]
- Επόμενη σελίδα στοιχείο
- Επιστροφή στο επίπεδο πάνω Εγχειρίδιο Αναφορών για τους Επιλογείς του CSS
Ορισμός και χρήση
CSS Ενσωμάτωση (&
) Επιλογείς χρησιμοποιούνται για την εφαρμογή στυλ στο στοιχείο σε κείμενο άλλου στοιχείου.
Η ενσωμάτωση μειώνει την ανάγκη για επανάληψη επιλογέων για σχετικά στοιχεία.
Παράδειγμα
Παράδειγμα 1
Πριν από την ενσωμάτωση, πρέπει να δηλώσετε ξεκάθαρα τους επιλογείς σας, όπως στο παρακάτω παράδειγμα:
.box { κύκλος: 2 εικονοστοιχεία συμπαγές πράσινο; χρώμα-υποβάθρου: κίτρινο; οικογένεια- γραμματοσειράς: monospace; μέγεθος- γραμματοσειράς: 20 εικονοστοιχεία; } .box > a { χρώμα: πράσινο; } .box > a:hover { χρώμα: λευκό; χρώμα-υποβάθρου: κόκκινο-καρπίου; }
Παράδειγμα 2
Με την ενσωμάτωση, οι επιλογείς συνεχίζονται και τα σχετικά ρήγματα ρυθμίσεων ομαδοποιούνται μέσα στην ρηγήματα του γονέα:
.box { κύκλος: 2 εικονοστοιχεία συμπαγές πράσινο; χρώμα-υποβάθρου: κίτρινο; οικογένεια- γραμματοσειράς: monospace; μέγεθος- γραμματοσειράς: 20 εικονοστοιχεία; & > a { χρώμα: πράσινο; &:hover { χρώμα: λευκό; χρώμα-υποβάθρου: κόκκινο-καρπίου; } } }
Συμβουλή:Αν η κλάση .box στο παρακάτω παράδειγμα πρέπει να αφαιρεθεί από το έργο σας, μπορείτε να αφαιρέσετε ολόκληρη τη ομάδα χωρίς να αναζητήσετε τους σχετικούς επιλογείς.
Γλωσσάρι CSS
υπογραμμή规ᾶς { θρήνιες κλάσεις CSS; & γιόνος规ᾶς { θρήνιες κλάσεις CSS; } }
Τεχνικές λεπτομέρειες
Έκδοση: | Μονόληψμα CSS Nesting |
---|
Υποστήριξη περιηγητών
Χρωμέι | Εντζ | Φάιρεξ | Σαφάρι | Οπερα |
---|---|---|---|---|
120 | 120 | 117 | 17.2 | 106 |
- Προηγούμενη σελίδα [attribute*=value]
- Επόμενη σελίδα στοιχείο
- Επιστροφή στο επίπεδο πάνω Εγχειρίδιο Αναφορών για τους Επιλογείς του CSS