:matchesSözde sınıf resmi CSS Seçiciler Seviye 4 teknik özellikleri ile işlevsel bir sözde sınıfı olarak tanımlanır. Gruplanmalarına izin vererek bazı karmaşık seçicileri daha hafif yapmak dışında kendi başına herhangi bir amaca hizmet etmez. Bir bakıma :matchessözdizimsel şeker olarak düşünebiliriz .
Temel olarak, değişen yalnızca bir öğe olduğunda bir bileşik seçiciyi tekrar etmekten sizi uzak tutar. Yazmanın sadece daha hızlı değil, aynı zamanda tarayıcılar için ayrıştırmanın da daha hızlı olduğuna inanıyorum, ancak bu sözde sınıfın seçicilere yardımcı olmaktan başka bir şey yapmadığını bildiğim kadarıyla bu konuda sağlam bir bilgim yok.
Sözdizimi
:matches( selector(, selector)* ):matches()bağımsız değişken olarak geçerli seçiciler listesini kabul eder. Sevmek:
:matches(section, article, aside, nav) h1 ( color: #BADA55; ) /* Same thing as this… */ section h1, article h1, aside h1, nav h1 ( color: #BADA55; )Bazı karmaşık seçicileri yazmayı çok daha kolay hale getirir, örneğin:
: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; )Ve daha az tekrarlayan:
.links:matches(:hover, :focus, :active) ( color: #BADA55; ) /* Same as */ .links:hover, .links:focus, .links:active ( color: #BADA55; )Not :matches()iç içe olamaz ve çalışmaz :not(). Aşağıdaki seçicilerden hiçbiri çalışmayacak:
/* Doesn't work */ :matches(:not(… )) /* Doesn't work */ :not(:matches(… )) /* Doesn't work */ :matches(:matches(… ))Nerd Uyarısı
Spesifikasyonlar , hızlı profilde geçen seçicide birleştiricilere (örn. ~, >…) İzin verilmediğini, ancak karmaşık profilde olacağını belirtir . Basitçe söylemek gerekirse, hızlı profil, spesifikasyonların ilk (ve olası en son) uygulaması olacaktır; karmaşık profil ise performansın çok önemli olmadığı varsayımsal mükemmel bir gelecekle ilgilidir.
Güncelleme Haziran 2015: Yukarıdaki paragrafın ne kadar doğru olduğundan artık emin değilim. Bağlandığımız özellik değişti ve o kısım gitti. Biz de bağlantıyı kaldırdık.
Sass ile davranışı taklit etme
Sass (veya bu konuda herhangi bir CSS ön işlemcisi) ile benzer bir davranışı simüle etmek mümkündür:
// section h1, article h1, aside h1, nav h1 section, article, aside, nav ( h1 ( color: #BADA55; ) )Bu, :matches()seçici yerleştirmeyi kullanarak için eşdeğer seçiciyi oluşturur . Bunu daha yüksek bir düzeyde otomatikleştirmek için bir tür işlev bile oluşturabilirsiniz, ancak bu burada kapsam dışında.
Tarayıcı desteği
Bu tarayıcı destek verileri, daha fazla ayrıntıya sahip olan Caniuse'den alınmıştır. Bir sayı, tarayıcının özelliği o sürümde ve sonrasında desteklediğini gösterir.
Masaüstü Bilgisayar
| Krom | Firefox | IE | Kenar | Safari |
|---|---|---|---|---|
| 88 | 78 | Hayır | 88 | 14 |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 14.0-14.4 |
Not: CSS, anlamadığı bir parça olduğunda tüm seçiciyi reddettiğinden, her yerde çalışmasını sağlamak için onları ayırmanız gerekir. Örneğin, eğer hala
/* 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; )