CSS: so khớp () Pseudo-Class

---

: match () là một lớp giả CSS mới cho phép tiết kiệm thời gian bằng cách group các bộ chọn lại với nhau:

:matches(article, div.section, section) h2 {
  font-size: 3em;
}

/* Is this equivalent of this: */
article h2, div.section h2, section h2 {
  font-size: 3em;
}

Đây là một ví dụ khác để mang về điểm chính:

:matches(.main, p, div.my-stuff) :matches(h1, h2, h3, h4) {
  border: 2px dotted rgba(255,134,34,0.5);
}

/* Is this equivalent of this: */
.main h1,
.main h2,
.main h3,
.main h4,
p h1,
p h2,
p h3,
p h4,
div.my-stuff h1,
div.my-stuff h2,
div.my-stuff h3,
div.my-stuff h4 {
  border: 2px dotted rgba(255,134,34,0.5);
}

Đã tiết kiệm rất nhiều thời gian khi nhập tất cả những điều này trong ví dụ thứ hai này! Điều này có thể giúp làm cho các file CSS của bạn nhỏ hơn.

Hỗ trợ trình duyệt

👉 Myth là một lựa chọn tốt để bắt đầu sử dụng: trận đấu () ngay hôm nay.

Tôi có thể sử dụng css-match-pseudo không? Dữ liệu về hỗ trợ cho tính năng css-match-pseudo trên các trình duyệt chính từ caniuse.com.

---

---

Các tin liên quan

Giới thiệu ngắn gọn về các biến CSS (Thuộc tính tùy chỉnh)
2016-06-01
Phát hiện tính năng trong CSS với @supports
2016-05-05
Bộ chọn thuộc tính CSS
2016-02-05
Hàm calc () CSS
2015-10-08
Cách sử dụng Bộ tiền xử lý CSS LESS trên VPS Ubuntu
2014-01-27