Μάθετε τι είναι ένας επιλογέας απογόνων CSS

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

Διαδοχικοί επιλογείς CSS

Ένας επιλογέας απογόνων CSS ισχύει για τα στοιχεία που βρίσκονται μέσα σε άλλο στοιχείο (ή πιο συγκεκριμένα, ένα στοιχείο που είναι απόγονος άλλου στοιχείου). Για παράδειγμα, μια μη ταξινομημένη λίστα έχει μια ετικέτα με ετικέτες ως απόγονοι. Ας χρησιμοποιήσουμε ως παράδειγμα το ακόλουθο HTML:

• αυτός είναι ένας σύνδεσμος

ο LI οι ετικέτες είναι απόγονοι του UL ετικέτα. ο ΕΝΑ tag είναι απόγονος του και τα δυο ο LI (απόγονος παιδιού) και UL (απόγονος των εγγονών). Εάν σκεφτείτε να το σκεφτείτε αυτό χρησιμοποιώντας το παράδειγμα οικογενειακού δέντρου, το

θα είναι ο γονέας, η
• θα ήταν το παιδί του στοιχείου και θα ήταν το παιδί του
• και το εγγόνι του
  .

  Πώς θα στοχεύσετε συγκεκριμένα στοιχεία σε μια ιστοσελίδα χρησιμοποιώντας αυτούς τους επιλογείς των απογόνων; Πρώτον, πρέπει να ορίσετε τους επιλογείς των απογόνων χρησιμοποιώντας δύο (ή περισσότερους) επιλογείς τύπου που χωρίζονται με κενά.

  li a {κείμενο-διακόσμηση: κανένας; }}

  Σε αυτό το παράδειγμα, τα στυλ θα ισχύουν μόνο για ένα στοιχείο σύνδεσης () που είναι απόγονος ενός στοιχείου λίστας-στοιχείου (

  • ). Όλοι οι άλλοι σύνδεσμοι στη σελίδα που δεν είναι απόγονοι ενός στοιχείου λίστας δεν θα έχουν αυτό το στυλ.

    Ένα σημαντικό πράγμα που πρέπει να θυμάστε είναι ότι δεν έχει σημασία πόσες ετικέτες βρίσκονται μεταξύ των ετικετών που μπορεί να χρησιμοποιείτε στον απογόνου σας επιλογέα. Εάν το δεύτερο στοιχείο περικλείεται οπουδήποτε μέσα στο πρώτο στοιχείο, θα επιλεγεί ως απόγονος.

    Αν θέλετε να επιλέξετε όλες τις άγκυρες που προέρχονται από στοιχεία ul, θα γράψετε:

    ul a {κείμενο-διακόσμηση: κανένας; }}

    Τώρα, αυτά τα στυλ θα ισχύουν για κάθε σύνδεσμο που είναι απόγονος ενός στοιχείου λίστας. Θα μπορούσατε επίσης να γράψετε αυτόν τον επιλογέα

    ul li a {κείμενο-διακόσμηση: κανένας; }}

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

    Χρησιμοποιώντας τους επιλογείς κλάσης και τους επιλογείς ταυτότητας

    Οι επιλογείς από τους οποίους κατεβαίνετε δεν πρέπει πάντα να είναι τύπου απόγονοι. Για παράδειγμα, φανταστείτε ότι είχατε μια περιοχή του ιστότοπου (όπως ένα τμήμα) με χαρακτηριστικό ταυτότητας "billboard". Θα μπορούσατε να ρυθμίσετε έναν απόγονο απογόνων από αυτό το αναγνωριστικό:

    #billboard ul {φόντο-χρώμα: #ccc; }}

    Αυτό θα χαρακτήριζε τον μη ταξινομημένο κατάλογο που είναι απόγονος ενός στοιχείου με αναγνωριστικό "billboard". Μπορείτε να κάνετε το ίδιο και για τις τιμές κλάσης.

    div.billboard ul {φόντο-χρώμα: #ccc; }}

    Αυτό προϋποθέτει ότι η διαίρεση έχει τιμή κλάσης "billboard". Το CSS παραπάνω θα στυλ το

    στοιχείο στο εσωτερικό οποιασδήποτε διαίρεσης που έχει αυτή την τάξη αξία.

    Μπορείτε να πάρετε πραγματικά βαρύ χέρια και verbose με απογόνους επιλογείς. Για παράδειγμα, εάν χρησιμοποιείτε το Dreamweaver για να γράψετε τον κώδικα HTML, υπάρχει μια ρύθμιση όταν προσθέτετε νέους κανόνες CSS που θα δημιουργήσουν αυτόματα τον επιλογέα με βάση την τοποθέτηση του δρομέα σας στη συγκεκριμένη σελίδα. Αυτό που κάνει το Dreamweaver σε αυτή την περίπτωση είναι να δημιουργήσει έναν άγριο λεπτομερή και μακροσκελή επιλογέα απογόνων. Αυτή η ιδιαιτερότητα δεν είναι απαραίτητη για να λειτουργήσει το CSS. Αυτό που θέλετε να κάνετε είναι να βρείτε μια ισορροπία μεταξύ ενός επιλογέα απογόνου που είναι αρκετά συγκεκριμένη ώστε να μπορείτε να εξάξετε τα ακριβή στοιχεία που χρειάζεστε (χωρίς αυτά που δεν θέλετε να επηρεάσετε) χωρίς να έχετε κανόνες CSS με επιλογείς που είναι υπερβολικά μεγάλο.