Υπάρχουν πολλοί τρόποι με τους οποίους μπορείτε να επιλέξετε στοιχεία στο CSS. Η πιο βασική επιλογή είναι με όνομα ετικέτας, όπως p ( ). Σχεδόν οτιδήποτε πιο συγκεκριμένο από έναν επιλογέα ετικετών χρησιμοποιεί χαρακτηριστικά - classκαι και τα IDδύο επιλέγουν αυτά τα χαρακτηριστικά σε στοιχεία HTML. Αλλά classκαι IDδεν είναι τα μόνα χαρακτηριστικά που μπορούν να επιλέξουν οι προγραμματιστές. Μπορούμε να χρησιμοποιήσουμε οποιοδήποτε από τα χαρακτηριστικά ενός στοιχείου ως επιλογείς.
Η επιλογή χαρακτηριστικών έχει μια ειδική σύνταξη. Ακολουθεί ένα παράδειγμα:
a(href="https://css-tricks.com") ( color: #E18728; )Αυτός είναι ένας επιλογέας ακριβούς αντιστοίχισης που θα επιλέξει μόνο συνδέσμους με την ακριβή hrefτιμή χαρακτηριστικού του "https://css-tricks.com".
Οι επτά διαφορετικοί τύποι
Οι επιλογείς χαρακτηριστικών είναι ευαίσθητοι σε πεζά από προεπιλογή (δείτε την αντιστοίχιση με κεφαλαία γράμματα παρακάτω) και είναι γραμμένοι εντός αγκυλών ().
Υπάρχουν επτά διαφορετικοί τύποι αγώνων που μπορείτε να βρείτε με έναν επιλογέα χαρακτηριστικών και η σύνταξη είναι διαφορετική για κάθε μία. Κάθε ένας από τους πιο σύνθετους επιλογείς χαρακτηριστικών βασίζεται στη σύνταξη του επιλογέα ακριβούς αντιστοίχισης - όλοι ξεκινούν με το όνομα του χαρακτηριστικού και τελειώνουν με ένα σύμβολο ίσο ακολουθούμενο από τις τιμές των χαρακτηριστικών, συνήθως σε εισαγωγικά. Αυτό που πηγαίνει μεταξύ του ονόματος χαρακτηριστικού και του σημείου ισούται με αυτό που κάνει τη διαφορά μεταξύ των επιλογών.
(data-value) ( /* Attribute exists */ ) (data-value="foo") ( /* Attribute has this exact value */ ) (data-value*="foo") ( /* Attribute value contains this value somewhere in it */ ) (data-value~="foo") ( /* Attribute has this value in a space-separated list somewhere */ ) (data-value^="foo") ( /* Attribute value starts with this */ ) (data-value|="foo") ( /* Attribute value starts with this in a dash-separated list */ ) (data-value$="foo") ( /* Attribute value ends with this */ )Η τιμή περιέχει: η τιμή χαρακτηριστικού περιέχει έναν όρο ως τη μοναδική τιμή, μια τιμή σε μια λίστα τιμών ή ως μέρος μιας άλλης τιμής. Για να χρησιμοποιήσετε αυτόν τον επιλογέα, προσθέστε έναν αστερίσκο (*) πριν από το σύμβολο ίσον. Για παράδειγμα, img(alt*="art")θα επιλέξει εικόνες με το κείμενο alt «abstract art» και «αθλητής που ξεκινά ένα νέο άθλημα», επειδή η τιμή «art» είναι στη λέξη «εκκίνηση».
Η τιμή βρίσκεται σε μια λίστα χωρισμένη με κενό: η τιμή είναι είτε η μόνη τιμή χαρακτηριστικού είτε είναι μια ολόκληρη τιμή σε ένα σύνολο τιμών διαχωρισμένων με κενό. Σε αντίθεση με τον επιλογέα "περιέχει", αυτός ο επιλογέας δεν θα αναζητήσει την τιμή ως κομμάτι λέξης. Για να χρησιμοποιήσετε αυτόν τον επιλογέα, προσθέστε ένα tilde (~) πριν από το σύμβολο ίσον. Για παράδειγμα, img(alt~="art")θα επιλέξει εικόνες με το κείμενο alt "abstract art" και "art show", αλλά όχι "αθλητής που ξεκινά ένα νέο άθλημα" (το οποίο θα επιλέξει ο επιλογέας "περιέχει").
Η τιμή ξεκινά με: η τιμή χαρακτηριστικού ξεκινά με τον επιλεγμένο όρο. Για να χρησιμοποιήσετε αυτόν τον επιλογέα, προσθέστε ένα μοτίβο (^) πριν από το σύμβολο ίσο. Μην ξεχνάτε, έχει σημασία η ευαισθησία. Για παράδειγμα, το img (alt = "art") θα επιλέξει εικόνες με το alt κείμενο "art show" και "artistic pattern", αλλά όχι μια εικόνα με το alt alt "Arthur Miller" επειδή το "Arthur" ξεκινά με κεφαλαίο γράμμα .
Η τιμή είναι πρώτη σε μια λίστα διαχωρισμένη με παύλα: Αυτός ο επιλογέας είναι πολύ παρόμοιος με τον επιλογέα "ξεκινά με". Εδώ, ο επιλογέας ταιριάζει με μια τιμή που είναι είτε η μόνη τιμή είτε είναι η πρώτη σε μια λίστα τιμών διαχωρισμένων με παύλα. Για να χρησιμοποιήσετε αυτόν τον επιλογέα, προσθέστε έναν χαρακτήρα σωλήνα (|) πριν από το σύμβολο ίσον. Για παράδειγμα, li(data-years|="1900")θα επιλέξει στοιχεία λίστας με data-yearsτιμή "1900-2000", αλλά όχι το στοιχείο λίστας με data-yearsτιμή "1800-1900".
Η τιμή τελειώνει με: η τιμή χαρακτηριστικού τελειώνει με τον επιλεγμένο όρο. Για να χρησιμοποιήσετε αυτόν τον επιλογέα, προσθέστε ένα σύμβολο δολαρίου ($) πριν από το σύμβολο ίσον. Για παράδειγμα, a(href$="pdf")επιλέγει κάθε σύνδεσμο που τελειώνει με .pdf.
Σημείωση για εισαγωγικά: Μπορείτε να πάτε χωρίς εισαγωγικά γύρω από την τιμή σε ορισμένες περιπτώσεις, αλλά οι κανόνες για την επιλογή χωρίς εισαγωγικά είναι ασυνεπείς μεταξύ προγραμμάτων περιήγησης. Τα αποσπάσματα λειτουργούν πάντα, οπότε αν κολλήσετε στη χρήση τους, μπορείτε να είστε σίγουροι ότι ο επιλογέας σας θα λειτουργεί.
Δείτε το Pen Attribute Selectors by CSS-Tricks (@ css-tricks) στο CodePen.
Διασκεδαστικό γεγονός: οι τιμές αντιμετωπίζονται ως συμβολοσειρές, οπότε δεν χρειάζεται να κάνετε φανταχτερή διαφυγή χαρακτήρων για να τα κάνετε να ταιριάζουν, όπως θα κάνατε αν χρησιμοποιούσατε ασυνήθιστους χαρακτήρες σε μια τάξη ή έναν επιλογέα αναγνωριστικών.
(class="(╯°□°）╯︵ ┻━┻")( color: red; font-weight: bold; )Αντιστοίχιση χωρίς διάκριση πεζών-κεφαλαίων
Οι επιλογείς χαρακτηριστικών χωρίς ευαισθητοποίηση πεζών-κεφαλαίων αποτελούν μέρος των προδιαγραφών επιπέδου 4 της ομάδας εργασίας CSS. Όπως αναφέρθηκε παραπάνω, οι συμβολοσειρές τιμών χαρακτηριστικών είναι από προεπιλογή ευαίσθητες σε πεζά, αλλά μπορούν να αλλάξουν σε μη διάκριση πεζών-κεφαλαίων προσθέτοντας iλίγο πριν από την αγκύλη κλεισίματος:
(attribute="value" i) ( /* Styles here will apply to elements with: attribute="value" attribute="VaLuE" attribute="VALUE"… etc */ )Η αντιστοίχιση με αίσθηση πεζών-κεφαλαίων θα μπορούσε να είναι πολύ βολική για τη στόχευση χαρακτηριστικών που περιέχουν απρόβλεπτο, ανθρωπογραφικό κείμενο. Για παράδειγμα, ας υποθέσουμε ότι στυλάζατε ένα συννεφάκι ομιλίας σε μια εφαρμογή συνομιλίας και θέλετε να προσθέσετε ένα "κουνώντας χέρι" σε οποιαδήποτε μηνύματα με το κείμενο "γεια" σε κάποια μορφή. Θα μπορούσατε να το κάνετε μόνο με CSS, χρησιμοποιώντας έναν αντιστοίχιση χωρίς διάκριση πεζών-κεφαλαίων για να πιάσετε όλες τις πιθανές παραλλαγές:
Ανατρέξτε στην αντιστοίχιση χαρακτηριστικού CSS που δεν είναι ευαίσθητη στην πένα με CSS-Tricks (@ css-tricks) στο CodePen.
Συνδυάζοντας τα
Μπορείτε να συνδυάσετε έναν επιλογέα χαρακτηριστικών με άλλους επιλογείς, όπως ετικέτα, τάξη ή αναγνωριστικό.
div(attribute="value") ( /* style rules here */ ) .module(attribute="value") ( /* style rules here */ ) #header(attribute="value") ( /* style rules here */ )Ή συνδυάστε ακόμη και πολλούς επιλογείς χαρακτηριστικών. Αυτό το παράδειγμα επιλέγει εικόνες με εναλλακτικό κείμενο που περιλαμβάνει τη λέξη "άτομο" ως τη μόνη τιμή ή τιμή σε μια λίστα διαχωρισμένων με κενό διάστημα και μια srcτιμή που περιλαμβάνει την τιμή "lorem":
img(alt~="person")(src*="lorem") ( /* style rules here */ )Ανατρέξτε στην επιλογή Συνδυασμένα χαρακτηριστικά και επιλογή μόνο για χαρακτηριστικά από CSS-Tricks (@ css-tricks) στο CodePen.
Επιλογείς χαρακτηριστικών σε JavaScript και jQuery
Οι επιλογείς χαρακτηριστικών μπορούν να χρησιμοποιηθούν στο jQuery όπως και κάθε άλλος επιλογέας CSS. Στο JavaScript, μπορείτε να χρησιμοποιήσετε επιλογείς χαρακτηριστικών με document.querySelector()και document.querySelectorAll().
Δείτε το Pen Attribution Selectors στο JS και jQuery by CSS-Tricks (@ css-tricks) στο CodePen.
Σχετιζομαι με
- τάξη
- ταυτότητα
Περισσότερες πληροφορίες
- Οι Skinny on Attribute Selectors
- Επιλογείς χαρακτηριστικών στο MDN
- Επιλογείς χαρακτηριστικών στις προδιαγραφές W3C CSS
Υποστήριξη προγράμματος περιήγησης
| Χρώμιο | Σαφάρι | Firefox | ΛΥΡΙΚΗ ΣΚΗΝΗ | ΙΕ | Android | iOS |
|---|---|---|---|---|---|---|
| Οποιος | Οποιος | Οποιος | Οποιος | 7+ | Οποιος | Οποιος |