Kelas :matchespseudo digambarkan sebagai kelas pseudo berfungsi oleh spesifikasi CSS Selectors Level 4 rasmi. Itu tidak memenuhi tujuan sendiri kecuali membuat beberapa pemilih kompleks lebih ringan dengan membiarkan mereka dikelompokkan. Dengan cara tertentu, kita boleh berfikir sebagai :matchesgula sintaksis.
Pada dasarnya ia menjauhkan anda dari mengulangi pemilih kompaun apabila hanya ada satu item yang berbeza-beza. Saya percaya bukan sahaja lebih pantas untuk menulis tetapi juga lebih pantas untuk menguraikan penyemak imbas tetapi saya tidak mempunyai maklumat yang kukuh mengenai perkara ini sejauh yang saya tahu kelas pseudo ini tidak lebih daripada membantu menulis pemilih.
Sintaks
:matches( selector(, selector)* ):matches()menerima senarai pemilih yang sah sebagai hujah. Seperti:
:matches(section, article, aside, nav) h1 ( color: #BADA55; ) /* Same thing as this… */ section h1, article h1, aside h1, nav h1 ( color: #BADA55; )Ini menjadikan beberapa pemilih yang kompleks lebih mudah ditulis, contohnya:
: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; )Dan kurang berulang:
.links:matches(:hover, :focus, :active) ( color: #BADA55; ) /* Same as */ .links:hover, .links:focus, .links:active ( color: #BADA55; )Perhatikan bahawa :matches()tidak boleh bersarang dan tidak berfungsi :not(). Tidak ada pemilih berikut yang berfungsi:
/* Doesn't work */ :matches(:not(… )) /* Doesn't work */ :not(:matches(… )) /* Doesn't work */ :matches(:matches(… ))Makluman Nerd
Spesifikasi menyatakan bahawa penggabungan (misalnya ~, >…) tidak dibenarkan dalam pemilih lulus dalam profil pantas, tetapi akan berada dalam profil yang kompleks. Sederhananya, profil cepat akan menjadi yang pertama (dan mungkin terakhir) pelaksanaan spesifikasi, sementara profil yang kompleks mengaitkan masa depan yang sempurna hipotetis di mana prestasi tidak terlalu penting.
Kemas kini Jun 2015: Tidak pasti seberapa tepat perenggan di atas. Spesifikasi yang kami hubungkan telah berubah dan bahagian itu hilang. Oleh itu, kami membuang pautan tersebut.
Meniru tingkah laku dengan Sass
Adalah mungkin untuk mensimulasikan tingkah laku yang serupa dengan Sass (atau mana-mana pemprosesan CSS dalam hal ini):
// section h1, article h1, aside h1, nav h1 section, article, aside, nav ( h1 ( color: #BADA55; ) )Ini menjadikan pemilih yang setara :matches()dengan memanfaatkan pemilih bersarang. Anda bahkan boleh membuat semacam fungsi untuk mengotomatisasi ini pada tahap yang lebih tinggi, tetapi itu di luar ruang lingkup di sini.
Sokongan penyemak imbas
Data sokongan penyemak imbas ini berasal dari Caniuse, yang mempunyai lebih terperinci. Nombor menunjukkan bahawa penyemak imbas menyokong ciri pada versi dan ke atas.
Desktop
| Chrome | Firefox | IE | Hujung | Safari |
|---|---|---|---|---|
| 88 | 78 | Tidak | 88 | 14 |
Mudah Alih / Tablet
| Android Chrome | Android Firefox | Android | Safari iOS |
|---|---|---|---|
| 88 | 85 | 81 | 14.0-14.4 |
Catatan: oleh kerana CSS menolak keseluruhan pemilih ketika ada bahagian yang tidak difahami, anda harus memisahkannya agar dapat berfungsi di mana-mana sahaja. Contohnya, jika anda masih diam
/* 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; )