Επιλογέας χαρακτηριστικών CSS3 Στόχευση του τύπου αρχείου

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

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

Οι επιλογείς χαρακτηριστικών ήταν στην πραγματικότητα γύρω από το CSS 2.1, και τώρα με μερικούς ακόμα τύπους επιλογέων χαρακτηριστικών που προστίθενται στις προδιαγραφές CSS3, είμαστε σε θέση να στοχεύσουμε το χαρακτηριστικό του στοιχείου ακόμα πιο συγκεκριμένα.

Και, σε αυτήν την ανάρτηση, πρόκειται να χρησιμοποιήσουμε μία από τις συνταγές για να επιλέξετε το Τύπος αρχείου που εισάγεται ως μέρος της αξίας του χαρακτηριστικού.

Η σύνταξη και η υποστήριξη προγράμματος περιήγησης

ο Τύπος αρχείου βρίσκεται πάντα στο τέλος του ονόματος αρχείου. Έτσι, για να το επιλέξετε Τύπος αρχείου μπορούμε να χρησιμοποιήσουμε την ακόλουθη σύνταξη [attr $ = "αξία"]. Αυτή η σύνταξη χρησιμοποιεί το $ = που θα στοχεύει στο τέλος της τιμής του χαρακτηριστικού, για παράδειγμα:

 a [href $ = ". pdf"]: πριν από την background: url ('... /images/document-pdf-text.png') no-repeat;  

Το απόσπασμα παραπάνω θα επιλέξει κάθε σύνδεσμο που τελειώνει με την τιμή του χαρακτηριστικού .pdf και εισαγάγετε ένα εικονίδιο με κείμενο σε ετικέτα :πριν ψευδο-στοιχείο.

PDF Πηγή εικονιδίων: Εικόνες φούγκας

Ενώ αυτή είναι μια κοινή χρήση αυτού του επιλογέα, σίγουρα μπορούμε να προχωρήσουμε πέρα ​​από αυτό.

Σχετικά με τη συμβατότητα του προγράμματος περιήγησης αν και αυτή η σύνταξη εισάγεται επισήμως ως προδιαγραφή CSS3, έχει υποστηριχθεί από τότε Internet Explorer 7, ώστε να μπορείτε να το εφαρμόσετε με ασφάλεια μέσω όλων των σχεδίων σας.

Το παράδειγμα

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

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

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

Έτσι, εδώ είναι το σχέδιο, θα δώσουμε διαφορετικά χρώματα φόντου για τη λεζάντα για κάθε διαφορετική επέκταση εικόνας. Η εικόνα JPG θα πάρει ένα πράσινος , το PNG θα πάρει μπλε, και τελικά η gif θα πάρει μωβ.

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

 σχήμα θέση: σχετική?  

Προσθέστε μια μικρή διακόσμηση για τις εικόνες με περιγράμματα και σκιές.

 img border: 5px στερεά # ccc; -webkit-box-shadow: 1px 1px 3px 0px rgba (0, 0, 0, .5); σκιά κουτιού: 1px 1px 3px 0px rgba (0, 0, 0, .5);  

Και στη συνέχεια, ορίσαμε το προεπιλεγμένο στυλ και την τοποθέτηση για τη λεζάντα. Η λεζάντα ή η ετικέτα της εικόνας θα έχουν πλάτος 50px.

 img + σύλληψη χρώμα: #fff; θέση: απόλυτη; αρχή: 0; δεξιά: 0; πλάτος: 50px; ύψος: 50px; γραμμή-ύψος: 50px; κείμενο-ευθυγράμμιση: κέντρο;  

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

 img [src $ = ". jpg"] + σύριγγα χρώμα-φόντο: # a8b700;  

Το απόσπασμα παραπάνω θα στοχεύει κάθε εικόνα με το χαρακτηριστικό προέλευσης που τελειώνει με .jpg, τότε ο παρακείμενος επιλογέας θα βρει το στοιχείο δίπλα του. Στην περίπτωση αυτή, το απόλαυση θα προστεθεί με το # a8b700 χρώμα του φόντου.

Και εδώ είναι όλοι οι κώδικες για τις υπόλοιπες μορφές εικόνας, .png και .gif.

 img [src $ = ". png"] + σύριγγα χρώμα-φόντο: # 389abe;  img [src $ = ". gif"] + σύριγγα χρώμα-φόντο: # 8960a7;  

Τώρα, ας δούμε πώς φαίνεται ζωντανά από τη σύνδεση επίδειξης παρακάτω, αλλιώς μπορείτε να κατεβάσετε την πηγή για να την εξετάσετε εκτός σύνδεσης.

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

Οι πηγές εικόνας έχουν ως εξής: MacPro 1, MacPro 2 και MacPro 3

συμπέρασμα

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

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