Πώς να στοχεύσετε μια κλάση CSS μέσα σε μια άλλη κλάση CSS

'. Στη συνέχεια, εκχωρήστε ένα χαρακτηριστικό κλάσης για περαιτέρω χρήση.

Βήμα 2: Δημιουργήστε Nested 'div' Containers

Στη συνέχεια, φτιάξτε ένθετα δοχεία div ακολουθώντας την ίδια διαδικασία του βήματος 1:

< div τάξη = 'κυρίως περιεχόμενο' >

< div τάξη = 'τραπέζι' >

< div τάξη = 'σειρά' >

< div τάξη = 'σχισμή' > Παντρεύω < / div >

< div τάξη = 'γ-δεξιά' > Γρύλος < / div >

< div τάξη = 'σχισμή' > Κάποιος < / div >

< div τάξη = 'γ-δεξιά' > Ιούλιος < / div >

< / div >

< / div >

< / div >

Παραγωγή

---

---

Βήμα 3: Εφαρμόστε το στυλ στο κύριο κοντέινερ 'div'.

Πρόσβαση στο κύριο ' div ' κοντέινερ με τη βοήθεια του ονόματος της τάξης ως ' .κυρίως περιεχόμενο ”:

.κυρίως περιεχόμενο {

πλάτος : 40% ;

περιθώριο : 0 αυτο ;

χρώμα : μπλε ;

σύνορο : 2 εικονοστοιχεία διάσπαρτος μπλε ;

στοίχιση κειμένου : κέντρο ;

}

Εδώ:

• ' πλάτος ' καθορίζει το μέγεθος πλάτους του στοιχείου.
• ' περιθώριο ” εκχωρεί χώρο γύρω από το στοιχείο εκτός του καθορισμένου περιγράμματος.
• ' χρώμα ” ορίζει το χρώμα για το προστιθέμενο κείμενο στο στοιχείο.
• ' σύνορο ” ορίζει ένα περίγραμμα ή ένα όριο γύρω από το στοιχείο σε HTML.
• ' Στοίχιση κειμένου ' ορίζει τη στοίχιση του κειμένου του στοιχείου.

Βήμα 4: Δώστε στυλ σε άλλη τάξη

Αποκτήστε πρόσβαση στην κύρια κλάση CSS και σε άλλες ένθετες κλάσεις χρησιμοποιώντας τα ονόματά τους. Στη συνέχεια, ορίστε το πλάτος του κοντέινερ καθορίζοντας την τιμή σύμφωνα με την επιλογή σας:

.κυρίως περιεχόμενο .τραπέζι {

πλάτος : 80% ;

}

Επιπλέον, αποκτήστε πρόσβαση στην άλλη κλάση ακολουθώντας την ίδια διαδικασία όπως παραπάνω και εφαρμόστε τις ιδιότητες CSS που αναφέρονται στο παρακάτω απόσπασμα κώδικα:

.κυρίως περιεχόμενο .γ-δεξιά {

απεικόνιση : ενσωματωμένο μπλοκ ;

μέγεθος γραμματοσειράς : 20 εικονοστοιχεία ;

}

Σύμφωνα με το παραπάνω απόσπασμα κώδικα:

• ' απεικόνιση Η ιδιότητα ” χρησιμοποιείται για τη ρύθμιση της εμφάνισης ενός στοιχείου.
• ' μέγεθος γραμματοσειράς ” καθορίζει το μέγεθος του κειμένου που προστίθεται στο κοντέινερ.

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

.κυρίως περιεχόμενο .σχισμή {

πλάτος : 140 εικονοστοιχεία ;

περιθώριο-δεξιά : 6 εικονοστοιχεία ;

μέγεθος γραμματοσειράς : 16 εικονοστοιχεία ;

}

Για να γίνει αυτό, θα εφαρμόσουμε ' πλάτος », « περιθώριο-δεξιά ' και ' μέγεθος γραμματοσειράς ” για λόγους styling.

Επιπλέον, αποκτήστε πρόσβαση στο κύριο ' div ” κοντέινερ κατά μήκος άλλων ένθετων κοντέινερ div χρησιμοποιώντας το όνομα της κλάσης τους και εφαρμόστε τις ακόλουθες ιδιότητες CSS

.κύριος .γ-δεξιά {

πλάτος : αυτο ;

μέγεθος γραμματοσειράς : 15 εικονοστοιχεία ;

χρώμα : #fff ;

περιθώριο-δεξιά : 20 εικονοστοιχεία ;

βάρος γραμματοσειράς : κανονικός ;

}

Παραγωγή

Όλα αυτά αφορούν τη στόχευση μιας κλάσης CSS μέσα σε μια άλλη κλάση CSS.

συμπέρασμα

Για να στοχεύσετε μια τάξη CSS σε μια άλλη κλάση CSS, πρώτα, αποκτήστε πρόσβαση στην κύρια ' div ” μέσω του αντιστοιχισμένου χαρακτηριστικού κλάσης. Στη συνέχεια, αποκτήστε πρόσβαση σε άλλο κοντέινερ 'div' ακολουθώντας την ίδια διαδικασία. Επιπλέον, οι χρήστες μπορούν να στοχεύσουν μια κλάση CSS εντός άλλης κλάσης CSS. Αυτή η ανάρτηση έχει δείξει τη μέθοδο στόχευσης μιας κλάσης CSS σε μια άλλη κλάση CSS.