A Look into CSS3 First-Of-Type διαρθρωτικό επιλογέα

Αυτό το άρθρο είναι μέρος του μας "Σειρά HTML5 / CSS3 Tutorials" - αφιερωμένο να σας βοηθήσει να κάνετε έναν καλύτερο σχεδιαστή και / ή προγραμματιστή. Κάντε κλικ ΕΔΩ για να δείτε περισσότερα άρθρα από την ίδια σειρά.

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

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

 h2: Δήλωση στυλ / * πρώτου τύπου * /

ο : πρώτος τύπου είναι επίσης ίση με : nth-of-type (1), αντί να επιλέγετε μόνο το πρώτα του τύπου, μπορούμε να επιλέξουμε περαιτέρω το δεύτερο, το τρίτο και ούτω καθεξής. Το ακόλουθο απόσπασμα θα στοχεύσει στο δεύτερο h2 στοιχείο στην ιστοσελίδα.

 h2: nth-of-type (2) / * δήλωση στυλ * /

: πρώτος τύπου” vs. “:πρώτο παιδί”

Μπορεί να φαίνεται ότι αυτοί οι δύο επιλογείς κάνουν το ίδιο πράγμα, αλλά αυτό δεν συμβαίνει. Ας δούμε την ακόλουθη επίδειξη:

Ας πούμε ότι έχουμε πέντε στοιχεία παραγράφου τυλιγμένα σε ένα div, σαν αυτό:

  Pragraph 1
 Pragraph 2
 Pragraph 3
 Pragraph 4
 Pragraph 5

Τώρα, θα θέλαμε να επιλέξουμε την πρώτη παράγραφο χρησιμοποιώντας το :πρώτο παιδί εκλέκτορας.

 p: πρώτος-παιδί padding: 5px 10px; ακτίνα ακτίνων: 2px; φόντο: # 8960a7; χρώμα: #fff; σύνορα: 1px στερεά # 5b456a;

Και όπως περιμέναμε, η πρώτη παράγραφος επιλέγεται με επιτυχία.

: Demo του πρώτου παιδιού

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

  Ονομασία 1
 Pragraph 1
 Pragraph 2
 Pragraph 3
 Pragraph 4
 Pragraph 5

η πρώτη παράγραφος δεν θα επιλεγεί, ως το πρώτο παιδί στο εσωτερικό του div είναι δεν είναι πλέον μια παράγραφος, αλλά είναι τώρα ένα h1.

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

 p: πρώτος τύπου padding: 5px 10px; ακτίνα ακτίνων: 2px; φόντο: # a8b700; χρώμα: #fff; σύνορα: 1px στερεά # 597500;

: επίδειξη πρώτου τύπου

ο “τελευταίος” Εκλέκτορας

Όπου υπάρχει “πρώτα”, τότε θα υπάρξει και το “τελευταίος”.

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

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

 p: τελευταίο παιδί padding: 5px 10px; ακτίνα ακτίνων: 2px; φόντο: # 8960a7; χρώμα: #fff; σύνορα: 1px στερεά # 5b456a;

: επίδειξη τελευταίου παιδιού

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

ακολουθείται άμεσα από ένα διαφορετικό στοιχείο.

 p: τελευταίο είδος padding: 5px 10px; ακτίνα ακτίνων: 2px; φόντο: # a8b700; χρώμα: #fff; σύνορα: 1px στερεά # 597500;

: επίδειξη τελευταίου τύπου

Ο Επιλεκτικός

Όπως και κάθε άλλη νέα λειτουργία στο CSS3, αυτοί οι επιλογείς δεν υποστηρίζονται σε παλαιούς browsers, κυρίως Internet Explorer 6 έως 8, με εξαίρεση για το :πρώτο παιδί επιλογέα, όπως έχει προστεθεί από το CSS2.1. Η σχετική του :τελευταίο παιδί προστέθηκε μόνο στο CSS3.

Έτσι, εάν όλοι αυτοί οι επιλογείς που έχουμε αναφέρει εδώ είναι πραγματικά απαραίτητοι για το webite σας, μπορείτε να χρησιμοποιήσετε μια βιβλιοθήκη JavaScript που ονομάζεται Selectivizr για να μιμηθεί τη λειτουργικότητα του επιλογέα του CSS3.

Ο Selectivizr εξαρτάται από άλλες βιβλιοθήκες JavaScript για να λειτουργήσει, όπως το jQuery, το Dojo, το πρωτότυπο και το MooTools. και βλέποντας από τον πίνακα σύγκρισης στην επίσημη ιστοσελίδα, το MooTools φαίνεται να είναι σε θέση να χειριστεί όλους τους επιλογείς.

Έτσι, ας το συμπεριλάβουμε μαζί με τον Selectivizr, ως εξής:

Το σχόλιο υπό όρους παραπάνω θα διασφαλίσει ότι αυτές οι βιβλιοθήκες θα φορτωθούν μόνο στον Internet Explorer 8 και παρακάτω.

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

Διαδήλωση
Λήψη πηγής