:matchesПсевдо-клас описуються як функціональний псевдо-клас офіційного CSS селектори рівень 4 специфікації. Він сам по собі не служить жодним цілям, окрім полегшення деяких складних селекторів, дозволяючи їх групувати. Певним чином, ми можемо мислити :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(… ))Оповіщення ботаніка
У специфікаціях зазначено, що комбінатори (наприклад ~, >...) заборонені в переданому селекторі у швидкому профілі, але будуть у складному профілі. Простіше кажучи, швидкий профіль буде першим (і можливим останнім) впровадженням специфікацій, тоді як складний профіль пов’язаний з гіпотетичним ідеальним майбутнім, коли продуктивність не має великого значення.
Оновлення в червні 2015 року: Не впевнені, наскільки точний вищезазначений абзац. Характеристика, на яку ми зв’язали, змінилася, і ця частина зникла. Тож ми видалили посилання.
Імітуючи поведінку з Сассом
Можна імітувати подібну поведінку з Sass (або будь-яким попереднім процесором CSS):
// section h1, article h1, aside h1, nav h1 section, article, aside, nav ( h1 ( color: #BADA55; ) )Це створює еквівалентний селектор :matches(), використовуючи вкладання селектора. Ви навіть можете створити якусь функцію для автоматизації цього на більш високому рівні, але це поза сферою застосування тут.
Підтримка браузера
Дані про підтримку веб-переглядача подані компанією Caniuse, яка містить більше деталей. Цифра вказує на те, що браузер підтримує цю функцію на цій версії та вище.
Робочий стіл
| Chrome | Firefox | IE | Край | Сафарі |
|---|---|---|---|---|
| 88 | 78 | Ні | 88 | 14 |
Мобільний / планшетний
| 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; )