Die :matchesPseudoklasse wird in den offiziellen CSS Selectors Level 4-Spezifikationen als funktionale Pseudoklasse beschrieben. Es hat an sich keinen Zweck, außer einige komplexe Selektoren leichter zu machen, indem sie gruppiert werden können. In gewisser Weise können wir :matchesals syntaktischen Zucker denken .
Grundsätzlich werden Sie davon abgehalten, einen zusammengesetzten Selektor zu wiederholen, wenn nur ein Element variiert. Ich glaube, es ist nicht nur schneller zu schreiben, sondern auch schneller für Browser zu analysieren, aber ich habe keine soliden Informationen darüber, soweit ich weiß, dass diese Pseudoklasse nichts weiter tut, als beim Schreiben von Selektoren zu helfen.
Syntax
:matches( selector(, selector)* ):matches()akzeptiert eine Liste gültiger Selektoren als Argument. Mögen:
:matches(section, article, aside, nav) h1 ( color: #BADA55; ) /* Same thing as this… */ section h1, article h1, aside h1, nav h1 ( color: #BADA55; )Es erleichtert das Schreiben einiger komplexer Selektoren erheblich, zum Beispiel:
: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; )Und weniger repetitiv:
.links:matches(:hover, :focus, :active) ( color: #BADA55; ) /* Same as */ .links:hover, .links:focus, .links:active ( color: #BADA55; )Beachten Sie, dass :matches()dies nicht verschachtelt werden kann und nicht funktioniert :not(). Keiner der folgenden Selektoren funktioniert:
/* Doesn't work */ :matches(:not(… )) /* Doesn't work */ :not(:matches(… )) /* Doesn't work */ :matches(:matches(… ))Nerd Alarm
Die Spezifikationen Zustand , dass combinators (zB ~, >...) ist nicht in den übergebenen Wählern in schnellem Profil erlaubt, aber in komplexem Profil sein. Einfach ausgedrückt ist ein schnelles Profil die erste (und möglicherweise letzte) Implementierung der Spezifikationen, während ein komplexes Profil eine hypothetisch perfekte Zukunft beschreibt, in der die Leistung keine große Rolle spielt.
Update Juni 2015: Ich bin mir nicht mehr sicher, wie genau der obige Absatz ist. Die Spezifikation, mit der wir verlinkt haben, hat sich geändert und dieser Teil ist weg. Also haben wir den Link entfernt.
Verhalten mit Sass nachahmen
Es ist möglich, ein ähnliches Verhalten mit Sass (oder einem beliebigen CSS-Präprozessor) zu simulieren:
// section h1, article h1, aside h1, nav h1 section, article, aside, nav ( h1 ( color: #BADA55; ) )Dadurch wird der entsprechende Selektor erstellt, :matches()indem die Verschachtelung der Selektoren ausgenutzt wird. Sie könnten sogar eine Art Funktion erstellen, um dies auf einer höheren Ebene zu automatisieren, aber das liegt hier außerhalb des Bereichs.
Browser-Unterstützung
Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.
Desktop
| Chrom | Feuerfuchs | IE | Kante | Safari |
|---|---|---|---|---|
| 88 | 78 | Nein | 88 | 14 |
Handy / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 14.0-14.4 |
Hinweis: Da CSS den gesamten Selektor ablehnt, wenn ein Teil nicht verstanden wird, müssen Sie ihn trennen, damit er überall funktioniert. Zum Beispiel, wenn Sie still sind
/* 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; )