Η :matchesψευδο-τάξη περιγράφεται ως λειτουργική ψευδο-τάξη από τις επίσημες προδιαγραφές επιπέδου 4 CSS Selectors. Δεν εξυπηρετεί κανένα σκοπό από μόνη της, εκτός από το να κάνει ελαφρύτερους ορισμένους σύνθετους επιλογείς επιτρέποντάς τους να ομαδοποιηθούν. Κατά κάποιο τρόπο, μπορούμε να σκεφτούμε :matchesως συντακτική ζάχαρη.
Βασικά σας εμποδίζει να επαναλάβετε έναν σύνθετο επιλογέα όταν υπάρχει μόνο ένα στοιχείο που διαφέρει. Πιστεύω ότι δεν είναι μόνο πιο γρήγορο να γράφω, αλλά και πιο γρήγορα να αναλύω προγράμματα περιήγησης, αλλά δεν έχω σταθερές πληροφορίες σχετικά με αυτό, όσο γνωρίζω ότι αυτή η ψευδο-τάξη δεν κάνει τίποτα περισσότερο από το να βοηθάω να γράφω επιλεγμένους.
Σύνταξη
:matches( selector(, selector)* ):matches()αποδέχεται μια λίστα έγκυρων επιλογών ως όρισμα. Αρέσει:
:matches(section, article, aside, nav) h1 ( color: #BADA55; ) /* Same thing as this… */ section h1, article h1, aside h1, nav h1 ( color: #BADA55; )Κάνει μερικούς πολύπλοκους επιλογείς πολύ πιο εύκολο να γράψετε, για παράδειγμα:
:matches(section, article, aside, nav) :matches(h1, h2, h3, h4, h5, h6) ( color: #BADA55; ) /*… which would be the equivalent of: */ section h1, section h2, section h3, section h4, section h5, section h6, article h1, article h2, article h3, article h4, article h5, article h6, aside h1, aside h2, aside h3, aside h4, aside h5, aside h6, nav h1, nav h2, nav h3, nav h4, nav h5, nav h6 ( color: #BADA55; )Και λιγότερο επαναλαμβανόμενο:
.links:matches(:hover, :focus, :active) ( color: #BADA55; ) /* Same as */ .links:hover, .links:focus, .links:active ( color: #BADA55; )Σημειώστε ότι :matches()δεν είναι δυνατή η ένθεση και δεν λειτουργεί :not(). Κανένας από τους ακόλουθους επιλογείς δεν θα λειτουργήσει:
/* Doesn't work */ :matches(:not(… )) /* Doesn't work */ :not(:matches(… )) /* Doesn't work */ :matches(:matches(… ))Ειδοποίηση Nerd
Οι προδιαγραφές αναφέρουν ότι οι συνδυαστές (π.χ. ~, >…) δεν επιτρέπονται στον επιλεγμένο επιλογέα σε γρήγορο προφίλ, αλλά θα βρίσκονται σε περίπλοκο προφίλ. Για να το θέσω απλό, το γρήγορο προφίλ θα είναι η πρώτη (και πιθανή τελευταία) εφαρμογή των προδιαγραφών, ενώ το περίπλοκο προφίλ σχετίζεται με ένα υποθετικό τέλειο μέλλον όπου η απόδοση δεν έχει μεγάλη σημασία.
Ενημέρωση Ιουνίου 2015: Δεν είμαι σίγουρος πόσο ακριβής είναι η παραπάνω παράγραφος. Η προδιαγραφή με την οποία συνδέσαμε έχει αλλάξει και αυτό το μέρος έχει φύγει. Αφαιρέσαμε λοιπόν τον σύνδεσμο.
Μίμηση συμπεριφοράς με τον Sass
Είναι δυνατό να προσομοιώσετε μια παρόμοια συμπεριφορά με το Sass (ή οποιονδήποτε επεξεργαστή CSS για αυτό το θέμα):
// section h1, article h1, aside h1, nav h1 section, article, aside, nav ( h1 ( color: #BADA55; ) )Αυτό δημιουργεί τον ισοδύναμο επιλογέα :matches()με την εκμετάλλευση της επιλογής ένθεσης. Θα μπορούσατε ακόμη και να δημιουργήσετε κάποιο είδος λειτουργίας για να αυτοματοποιήσετε αυτό σε υψηλότερο επίπεδο, αλλά αυτό είναι εκτός του πεδίου εφαρμογής εδώ.
Υποστήριξη προγράμματος περιήγησης
Αυτά τα δεδομένα υποστήριξης του προγράμματος περιήγησης προέρχονται από την Caniuse, η οποία έχει περισσότερες λεπτομέρειες. Ένας αριθμός υποδεικνύει ότι το πρόγραμμα περιήγησης υποστηρίζει τη λειτουργία σε αυτήν την έκδοση και νεότερη.
Επιφάνεια εργασίας
| Χρώμιο | Firefox | ΙΕ | Ακρη | Σαφάρι |
|---|---|---|---|---|
| 88 | 78 | Οχι | 88 | 14 |
Κινητό / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 14.0-14.4 |
Σημείωση: δεδομένου ότι το CSS απορρίπτει ολόκληρο τον επιλογέα όταν υπάρχει ένα μέρος που δεν καταλαβαίνει, πρέπει να τους διαχωρίσετε για να το κάνετε παντού. Για παράδειγμα, εάν είστε ακόμα
/* This won't work in any browser because * Webkit browsers do not know `moz` and * Gecko browsers do not know `webkit` */ :-webkit-any(a, b) c, :-moz-any(a, b) c ( color: #BADA55; ) /* This however will work */ :-webkit-any(a, b) c ( color: #BADA55; ) :-moz-any(a, b) c ( color: #BADA55; )
