Επιλογείς ενσωμάτωσης 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