Lớp :matchesgiả được mô tả như một lớp giả chức năng theo thông số kỹ thuật chính thức của Bộ chọn CSS Cấp 4. Bản thân nó không phục vụ bất kỳ mục đích nào ngoại trừ việc làm cho một số bộ chọn phức tạp nhẹ hơn bằng cách cho phép chúng được nhóm lại. Theo một cách nào đó, chúng ta có thể nghĩ như :matchesmột đường cú pháp.
Về cơ bản, nó giúp bạn tránh lặp lại một bộ chọn phức hợp khi chỉ có một mục thay đổi. Tôi tin rằng nó không chỉ nhanh hơn để viết mà còn nhanh hơn để phân tích cú pháp cho các trình duyệt nhưng tôi không có thông tin chắc chắn về điều này cho đến khi tôi biết lớp giả này không làm gì khác hơn là giúp viết bộ chọn.
Cú pháp
:matches( selector(, selector)* ):matches()chấp nhận một danh sách các bộ chọn hợp lệ làm đối số. Giống:
:matches(section, article, aside, nav) h1 ( color: #BADA55; ) /* Same thing as this… */ section h1, article h1, aside h1, nav h1 ( color: #BADA55; )Nó làm cho một số bộ chọn phức tạp dễ viết hơn rất nhiều, ví dụ:
: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; )Và ít lặp lại hơn:
.links:matches(:hover, :focus, :active) ( color: #BADA55; ) /* Same as */ .links:hover, .links:focus, .links:active ( color: #BADA55; )Lưu ý rằng :matches()không thể được lồng vào nhau và không hoạt động với :not(). Không có bộ chọn nào sau đây sẽ hoạt động:
/* Doesn't work */ :matches(:not(… )) /* Doesn't work */ :not(:matches(… )) /* Doesn't work */ :matches(:matches(… ))Cảnh báo mọt sách
Các thông số kỹ thuật nêu rõ rằng các bộ tổ hợp (ví dụ ~, >…) không được phép trong bộ chọn được thông qua ở dạng nhanh, nhưng sẽ ở dạng phức tạp. Nói một cách đơn giản, cấu hình nhanh sẽ là lần triển khai đầu tiên (và có thể là cuối cùng) của các thông số kỹ thuật, trong khi cấu hình phức tạp liên quan đến một tương lai hoàn hảo giả định nơi hiệu suất không quan trọng nhiều.
Cập nhật tháng 6 năm 2015: Không chắc đoạn trên chính xác đến mức nào nữa. Thông số kỹ thuật mà chúng tôi liên kết đến đã thay đổi và phần đó đã biến mất. Vì vậy, chúng tôi đã gỡ bỏ liên kết.
Bắt chước hành vi với Sass
Có thể mô phỏng một hành vi tương tự với Sass (hoặc bất kỳ bộ tiền xử lý CSS nào cho vấn đề đó):
// section h1, article h1, aside h1, nav h1 section, article, aside, nav ( h1 ( color: #BADA55; ) )Điều này tạo ra bộ chọn tương đương :matches()bằng cách khai thác lồng bộ chọn. Bạn thậm chí có thể tạo một số loại chức năng để tự động hóa việc này ở cấp độ cao hơn, nhưng điều đó nằm ngoài phạm vi ở đây.
Hỗ trợ trình duyệt
Dữ liệu hỗ trợ trình duyệt này là từ Caniuse, có nhiều chi tiết hơn. Một con số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.
Máy tính để bàn
| Trình duyệt Chrome | Firefox | I E | Cạnh | Safari |
|---|---|---|---|---|
| 88 | 78 | Không | 88 | 14 |
Di động / Máy tính bảng
| Chrome dành cho Android | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 14.0-14.4 |
Lưu ý: vì CSS từ chối toàn bộ bộ chọn khi có phần nào đó nó không hiểu, bạn phải tách chúng ra để làm cho nó hoạt động ở mọi nơi. Ví dụ, nếu bạn vẫn
/* 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; )