:has là một bộ chọn không thể tha thứ

Một điều nhỏ đã xảy ra trên đường xuất bản CSS :has() bộ chọn đến Almanac cũ. ban đầu tôi đã mô tả :has() với tư cách là bộ chọn "tha thứ", ý tưởng là mọi thứ trong đối số của nó đều được đánh giá, ngay cả khi một hoặc nhiều mục không hợp lệ.

/* Example: Do not use! */
article:has(h2, ul, ::-scoobydoo) { }

Xem ::scoobydoo trong đó? Điều đó hoàn toàn không hợp lệ. Một danh sách bộ chọn tha thứ sẽ bỏ qua bộ chọn giả đó và tiến hành đánh giá phần còn lại của các mục như thể nó được viết như sau:

article:has(h2, ul) { }

:has() thực sự là một bộ chọn tha thứ trong bản nháp trước ngày 7 tháng 2022 năm XNUMX. Nhưng điều đó đã thay đổi sau khi một vấn đề đã được báo cáo rằng bản chất tha thứ xung đột với jQuery khi :has() chứa một bộ chọn phức tạp (ví dụ: header h2 + p). W3C đã đạt được một giải pháp để làm cho :has() một bộ chọn "không thể tha thứ" chỉ vài tuần trước

Vì vậy, ví dụ trước của chúng tôi? Toàn bộ danh sách bộ chọn không hợp lệ vì bộ chọn giả không hợp lệ. Nhưng hai bộ chọn tha thứ khác, :is() và :where(), được giữ nguyên.

Có một chút giải pháp cho việc này. Nhớ, :is() và :where()đang tha thứ, ngay cả khi :has() không phải. Điều đó có nghĩa là chúng ta có thể lồng một trong hai bộ chọn đó vào :has() để có được hành vi dễ tha thứ hơn:

article:has(:where(h2, ul, ::-scoobydoo)) { }

Cái nào bạn sử dụng có thể quan trọng vì tính đặc hiệu của :is() được xác định bởi mục cụ thể nhất trong danh sách của nó. Vì vậy, nếu bạn cần một cái gì đó ít cụ thể hơn, bạn nên tiếp cận :where() vì nó không thêm vào điểm cụ thể.

/* Specificity: (0,0,1) */
article:has(:where(h2, ul, ::-scoobydoo)) { } /* Specificity: (0,0,2) */
article:has(:is(h2, ul, ::-scoobydoo)) { }

Chúng tôi đã cập nhật một số bài đăng của mình để phản ánh thông tin mới nhất. Tôi thấy rất nhiều người khác trong tự nhiên cần được cập nhật, vì vậy chỉ cần một chút PSA cho bất kỳ ai cần làm điều tương tự.

• Phân phối nội dung và PR được hỗ trợ bởi SEO. Được khuếch đại ngay hôm nay.
• Platoblockchain. Web3 Metaverse Intelligence. Khuếch đại kiến ​​thức. Truy cập Tại đây.
• nguồn: https://css-tricks.com/has-is-an-unforgiving-selector/